vuex：从异步函数设置默认值答案

【问题标题】：vuex: set default values from async functionvuex：从异步函数设置默认值
【发布时间】：2017-11-02 09:39:58
【问题描述】：

我有以下商店：

export const store = new Vuex.Store({
    state: {
        someProp: someAsyncFn().then(res => res),
        ...
    },
    ...
})

不知何故，someProp 似乎没有等待解析值。这是不好的做法吗？我应该将一个空对象设置为默认值并通过加载突变来更新状态吗？

【问题讨论】：

标签： javascript vue.js state store vuex

【解决方案1】：

你应该这样做：

export const store = new Vuex.Store({
    state: {
        someProp: null
        ...
    },
    mutations:{
        initializeSomeProp: (state, payload) => {
            state.someProp = payload;
        }
    },
    actions:{
        asyncSomeProp: ({commit}) => {
            someAsyncFn().then(res => commit('initializeSomeProp', res))
        } 
    }
})

异步功能应该由动作来处理。您可以使用此操作asyncSomeProp 并通过将您在异步回调中获得的res 作为有效负载参数传递来提交突变initializeSomeOrop。

然后，如果您想在某个组件中初始化您的 someProp，那么您可以在该组件的 created 生命周期挂钩中调度您的 asyncSomeProp 操作，如下所示：

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

【讨论】：