是否可以在启动Vue实例时在Vuex内部调度操作?

时间:2017-12-17 18:04:51

标签: vue.js vuejs2 vuex

我一直在研究,到目前为止没有运气找到答案。现在我有一个包含2个模块的商店实例,但我们将使用第一个作为示例。

/Store/index.js

import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        header: require('./modules/header/index').default,
        current_user: require('./modules/user/index').default,
    }
});

export default store

/Store/modules/user/index.js

const state = {
    information: [],
}

const mutations = {
    setInformation(state, data){
        state.information = data;
    }
}

const getters = {
    getFirstName(state){
        return state.information.first_name;
    },
    getProfileImage(state){
        return state.information.image;
    }
}

const actions = {
    requestInformation({commit}){
        axios.get('/app/account/requestUserInformation').then(response => commit('setInformation', response.data) );
    }
}

export default {
    state,
    mutations,
    getters,
    actions
}

现在我有一个 requestInformation 操作,另一个名为 app.vue 的文件我正在调用它。

created(){
    this.$store.dispatch('requestInformation');
}

我想知道是否可以从vuex本身向requestInformation分派/发出请求,而不必在文件外部调用它,因此只要启动全局存储,就会调用requestInformation

我试图避免从不同的文件中分发操作。

1 个答案:

答案 0 :(得分:4)

您可以在/Store/index.js中创建商店后立即发送操作:

import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        header: require('./modules/header/index').default,
        current_user: require('./modules/user/index').default,
    }
});

store.dispatch('requestInformation');

export default store