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

Posted 2023-03-16

【中文标题】Nuxt / Vue - 不要在突变处理程序之外改变 vuex 存储状态

【英文标题】：Nuxt / Vue - Do not mutate vuex store state outside mutation handlers

【发布时间】：2021-09-03 22:38:43

【问题描述】：

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

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

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

    <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
  ,
  // ....

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

【参考方案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'])

【讨论】：

哦，好吧！因为我尝试了其他方法使用我在互联网上看到的 reduce 或 map 克隆我的对象，但是您的方法显然有效，确实是这样，谢谢！

推荐使用 Lodash，因为 stringify 解决方案存在一些罕见的问题。