如何在 Vuex 中获取和重置模块

Question

我有2个模块 #module A

const state = {
    a: '',
    b: '',
    c: '',
}
const mutations = {
    reset(state) {
    state.a = ''
    state.b = ''
    state.c = ''
  }
}

我使用 vuex-map-fields 在 componentA 中启用双向绑定

之后我想把模块A的所有状态都取到模块B(state.items)，取完后RESET #module B

const state = {
 items: []
},
const mutations = {
    addItem (state) {
        state.items.push(moduleA.state)
    },
}

我试过了

dispatch('moduleB/addItems')
commit('molduleA/reset')

与模块A的数据

const state = {
    a: '1',
    b: '2',
    c: '3',
}

但它不起作用，仅存储模块A重置状态

#resultOfModuleB

const state = {
 items: [
    {a:'', b:'', c:''}
 ]
},

如果我只发送 (‘moduleB/addItems’)，它就可以工作

const state = {
 items: [
    {a:'1', b:'2', c:'3'}
 ]
},

最好的方法是什么？提前致谢

Answer 1

好的，我想我现在明白你的问题了。如果我错了纠正我！如果您只是调用 ModuleB 函数，那么 B 将包含 A.state 的数据。但是如果你在 A.state 上调用重置函数，两者都是空的。

原因可能是您将 A.state 对象添加到 B.state 的方式。通过将 A.state 对象推入 B.state.items 数组，您不会处理该对象或其值。你只要传递对象在内存中的地址即可。

所以 A.state 和 B.state.items 数组的元素在内存中“查找”相同的位置。如果您现在休息 A.state，那么 B.state.items 数组元素也会更改。

您可以尝试使用状态数组的深度复制来解决此问题。 lodash 中有类似 cloneDeep 的函数或类似的函数。但是要完全理解发生了什么，你可以自己编写这样一个函数，因为它并不难。

function deepCopy(obj) {
  const retObj = {}
  Object.keys(obj).forEach(prop => {
    retObj[prop] = obj[prop];
  });

  return retObj
}

此函数应该适用于像您这样的对象和您的情况。（如果您的对象具有嵌套属性，则由于其访问属性的方式而无法工作）

我希望我没有遗漏任何东西并能以某种方式帮助你！

How to fetch and reset modules in Vuex