我的 vuex mutation 如何发送一个新动作？

Question

我的 vuex mutation 如何分派新动作或我的动作如何获得对商店的读取权限？

基本上我有一个调用突变的动作：

updateSelectedItems: (context, payload) => {
  context.commit('updateSelectedItems', payload);
},

以及更新列表的突变。它还会获得任何新项目。我需要对这些新项目做点什么：

updateSelectedItems: (state, payload) => {
  var newItems = _.differenceWith(payload, state.selectedItems, function (a, b) {
    return a.name === b.name;
  });
  state.selectedItems = _.cloneDeep(payload);

  _.each(newItems, (item) => {
    // How do I do this??
    context.dispatch('getItemDetail', item.name)
  });
},

Answer 1

让你的突变做太多真的不是最佳实践。最好是它们超级简单并且通常只做一件事。让您的操作处理可能影响状态的任何多步骤过程。

您的示例结构如下：

actions: {
  updateSelectedItems(context, payload) {
    var selectedItems = context.state.selectedItems;
    var newItems = _.differenceWith(payload, selectedItems, (a, b) => {
      return a.name === b.name;
    });

    context.commit('setSelectedItems', payload);

    _.each(newItems, (item) => {
      context.dispatch('getItemDetail', item.name)
    });
  },
  getItemDetail(context, payload) {
    // ...
  }
},
mutations: {
  setSelectedItems(state, payload) {
    state.selectedItems = _.cloneDeep(payload);
  }
}

如果你真的需要从突变内部调度一些东西（我强烈建议不要这样做），你可以将调度函数作为有效负载。

Answer 2

从技术上讲，使用 this 调用 dispatch 或 commit（或其他几个）是可行的...我只是为来到这里并需要它的任何人提及这一点针对他们的特定用例。

在我的情况下，我正在使用 fiery-vuex 库，它实际上传递一个函数作为有效负载，它将 return 更新的数据，我将它与数据库中的 refresh_time 键以确定何时刷新某些用户数据

SOME_MUTATION( state, getData() ){
    const new_data = getData()
    if( new_data.refresh_time > state.user.refresh_time ){
        this.dispatch( 'refreshFromOtherStateMeta', state.user.id )
    }
    state.user = new_data
}

我的 vuex mutation 如何发送一个新动作？

How can my vuex mutation dispatch a new action?

vuejs2

vuex