Nuxt / Vue - 不要在突变处理程序之外改变 vuex 存储状态

Question

我有一个简单的购物车商店，用于添加/删除商品。

当您将产品添加到购物车时，我会显示一条可以更新数量的消息。由于我不知道我的闪信组件中涉及到哪个产品，所以我使用商店。

我有一个简单的引导微调器：

    <b-form-spinbutton
      :value="value"
      min="1"
      max="26"
      @change="setItems"
    />

当我改变这个时，我想调用我商店的setItems 函数来更新最后添加的项目。

所以我用了：

  data () {
    return {
      value: 1
    }
  },
  methods: {
    setItems (value) {
      const items = [...this.$store.getters['cart/items']]
      // update quantity of the last item - we suppose it's the current item
      items.slice(-1)[0].quantity = value
      this.$store.commit('cart/setItems', items)
    }
  }

我在这里读到了这个错误：Vuex - Do not mutate vuex store state outside mutation handlers，所以我将v-model 更改为value 方法。

我的店铺cart.js 是：

export const state = () => ({
  items: []
})

export const mutations = {
  setItems (state, items) {
    state.items = items
  },
  // ....

我不知道如何处理这个问题？

Answer 1

存储状态在突变处理程序之外发生突变的行是：

items.slice(-1)[0].quantity = value

通过使用扩展运算符，您可以创建商店项目的浅表副本。每个项目属性仍然引用 vuex 状态。您可以创建一个深层副本，其中：

const items = JSON.parse(JSON.stringify(this.$store.getters['cart/items']))

或者，如果您的项目中有 lodash：

const items = _.cloneDeep(this.$store.getters['cart/items'])