我可以从 Vuex 中的 getter 进行调度吗

新手上路,请多包涵

小提琴: 这里

我正在使用带有 Vuex 的 Vue 2 创建一个 webapp。我有一个商店,我想从 getter 中获取状态数据,我想要的是如果 getter 发现数据尚未填充,它会调用 dispatch 并获取数据。

以下是我的 Vuex 商店:

 const state = {
  pets: []
};

const mutations = {
  SET_PETS (state, response) {
    state.pets = response;
  }
};

const actions = {
 FETCH_PETS: (state) => {
      setTimeout(function() {
            state.commit('SET_PETS', ['t7m12qbvb/apple_9', '6pat9znxz/1448127928_kiwi'])
    }, 1000)
 }
}

const getters = {
    pets(state){
    if(!state.pets.length){
        state.dispatch("FETCH_PETS")
    }
    return state.pets
  }
}

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

但我收到以下错误:

未捕获的类型错误:state.dispatch 不是函数(…)

我知道我可以做到这一点,来自 Vue 组件的 beforeMount ,但我有多个使用相同 Vuex 存储的组件,所以我必须在其中一个组件中执行此操作,应该是哪个以及如何它会影响其他组件。

原文由 Saurabh 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 321
1 个回答

Getter 无法调用 dispatch,因为它们通过了商店的 state 而不是 context

动作可以在传递上下文时调用状态、调度、提交。

Getter 用于管理“派生状态”。

如果您改为在需要它的组件上设置 pets 状态,那么您只需从应用程序的根目录调用 FETCH_PETS 并删除对 getter 的需要

原文由 GuyC 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题