由于反应性导致动作内部 Vuex 数据突变的问题

Question

我的 Vuex 商店中有一个操作应该调用 API 以更新新数据。

我想创建一个对象，它是我商店中现有值的副本，并可以自由改变它而不受反应性的影响。

现在，当我调用 Array.push() 时，我运行遇到了这个错误

Do not mutate vuex store state outside mutation handlers

我该如何做？

（我在 rootState.phone.policy.currentPolicy.attributes.insured.phones 上有一个 getter，我解释了这个错误）。

  async [PolicyActionTypes.UPDATE_POLICY](
    { rootState },
    payload: UpdatePolicyPayload
  ) {
    const newPolicy: Policy = {
      ...rootState.phone.policy.currentPolicy,
    };

    const newPhone: Phone = {
      imei: '123',
      brand: 'Samsung',
    };

    newPolicy.attributes.insured.phones.push(newPhone);

    // Fake async API call
    api.updatePolicy(newPolicy)
  },

Answer 1

当你传播时，你正在做一个浅拷贝，因此你仍然引用旧对象。
当你改变对象时，你认为它是一个深拷贝，但它仍然是旧的。

有关我的的更多信息。

TLDR：cloneDeep 确实是去这里的方法。

由于反应性导致动作内部 Vuex 数据突变的问题

Problem with Vuex data mutation inside action due to reactivity

typescript

vue.js

vuex

nuxt.js