Question

如何使动态属性添加到 Vuex 状态响应？当调用任何未预定义的状态属性时，getter 和 actions 的结果在刷新时返回 undefined。

Vuex 商店

interface State {
    ...
    profile: { [key: string]: any }
}

export default createStore<State>({
    state: {
        ...
        profile: {},
    },
    getters: {
        name: state => state.profile.name
    },
    mutations: {
        mSetUserProfile: ( state, payload ) => {
            Object.assign(state.profile, payload),
        }
    },
    actions: {
        aSetUserProfile: ({ commit }) => {
            db.collection(foo)
                .doc(bar)
                .get()
                .then(response => commit('mSetUserProfile', response))
        },
        aGetName: ({state}) => state.profile.name
    }
})

App.vue

setup(){
    ...
    store.dispatch('aSetUserProfile')

    store.dispatch('aGetName') // returns 'undefined'
    store.getters.name         // returns 'undefined'
    ...
}

Answer 1

aGetName 应该是 getter 而不是 action。

aSetUserProfile 包含一个错误，它不允许内部 promise 被链接，它应该是：

    aSetUserProfile: ({ commit }) => {
        return db.collection(foo) ...

动作是异步的，它们的结果不应该立即可用。可以使用 <suspense>:

等待组件初始化

async setup() {
  await store.dispatch('aSetUserProfile')
  ...

或者这可以在onMounted中初始化之后完成。

如何访问 Vuex 动态状态属性？

1 个答案: