javascript - Vue 为多个模块添加可重用的突变

Question

我有一个可以在多个 vuex 模块之间重用的突变，但会在模块级别修改状态。如何将突变分离出来，以便将其放入每个模块的突变中，而无需重复代码？

const state = {
  fieldInfo: {}
}

const actions = {
  async getOptions({ commit }) {
    commit('setOptions', await Vue.axios.options('/'))
  }
}

const mutations = {
  setOptions(state, value) {
    // long mutation happens here
    state.fieldInfo = value
  }
}

export default {
  namespaced: true,
  state,
  actions,
  mutations
}

Answer 1

由于您已经对商店进行了命名空间，因此这应该可以完美运行。您需要做的就是将突变函数移动到它自己的文件中，然后将其导入到您需要的存储中。

export default function (state, value) {
  // long mutation happens here
  state.fieldInfo = value
}

然后在您的商店

import setOptions from './setOptions.js'

const state = {
  fieldInfo: {}
}

const actions = {
  async getOptions({ commit }) {
    commit('setOptions', await Vue.axios.options('/'))
  }
}

const mutations = {
  setOptions
}

export default {
  namespaced: true,
  state,
  actions,
  mutations
}