vuex:从异步函数设置默认值
vuex: set default values from async function
我有以下商店:
export const store = new Vuex.Store({
state: {
someProp: someAsyncFn().then(res => res),
...
},
...
})
不知何故,someProp
似乎没有等待解析值。这是不好的做法吗?我应该将一个空对象设置为默认值并通过加载时的突变更新状态吗?
你应该这样做:
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
,那么您可以在该组件的已创建生命周期挂钩中分派 asyncSomeProp
操作,如下所示:
created(){
this.$store.dispatch('asyncSomeProp');
}
我有以下商店:
export const store = new Vuex.Store({
state: {
someProp: someAsyncFn().then(res => res),
...
},
...
})
不知何故,someProp
似乎没有等待解析值。这是不好的做法吗?我应该将一个空对象设置为默认值并通过加载时的突变更新状态吗?
你应该这样做:
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
,那么您可以在该组件的已创建生命周期挂钩中分派 asyncSomeProp
操作,如下所示:
created(){
this.$store.dispatch('asyncSomeProp');
}