vue.js - 如何在 Vuex 中获取和重置模块

Question

我有 2 个模块
#模块A

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

我使用 vuex-map-fields 在 componentA 中启用双向绑定(bind)
之后，我想将模块 A 的所有状态获取到模块 B(state.items)，并在完成获取后重置
#模块 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 上调用 reset 函数，两者都是空的。
其原因可能是因为您将 A.state 对象添加到 B.state 的方式。
通过将 A.state 对象插入 B.state.items 数组，您不会处理对象或其值。您只需传递对象在内存中的地址。
所以 A.state 和 B.state.items 数组的元素正在“查看”内存中的相同位置。如果您现在休息 A.state，则 B.state.items 数组元素也会更改。
您可以尝试使用状态数组的 deepCopy 来解决此问题。 lodash 中有类似 cloneDeep 之类的功能或类似的功能。但是要完全理解发生了什么，您可以自己编写这样的函数，因为它并不难。

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

  return retObj
}

此功能应该适用于您的对象以及您的情况。 (如果您的对象具有嵌套属性，则由于其访问属性的方式而无法工作)
我希望我没有错过任何东西，并且能以某种方式帮助你!