Nuxt/Vue中Vuex状态修改报错：Do not mutate vuex store state outside mutation handlers 问题解决咨询

你遇到的问题核心是浅复制导致的引用类型修改——虽然你用[...this.$store.getters['cart/items']]复制了购物车数组，但数组里的商品对象是引用类型，新数组里的最后一项依然和Vuex state中的原对象指向同一个内存地址。直接修改items.slice(-1)[0].quantity本质上还是在mutation外部修改了state，因此触发了Vuex的警告。

解决方案1：在组件中深度复制目标商品对象 #

修改你的setItems方法，先复制最后一个商品的完整对象，再修改数量并替换数组中的对应项：

methods: {
  setItems (value) {
    const items = [...this.$store.getters['cart/items']]
    // 复制最后一个商品对象，断开与原state对象的引用
    const updatedLastItem = { ...items[items.length - 1], quantity: value }
    // 替换数组中的最后一项
    items[items.length - 1] = updatedLastItem
    this.$store.commit('cart/setItems', items)
  }
}

解决方案2：在Vuex mutation中处理更新逻辑（更推荐） #

按照Vuex的设计规范，所有state修改都应该放在mutation中。你可以新增一个专门的mutation来更新最近添加商品的数量，这样组件逻辑更简洁，也避免了外部修改state的风险：

首先在cart.js中添加新的mutation：

export const mutations = {
  setItems (state, items) {
    state.items = items
  },
  // 新增：更新最后一项商品的数量
  updateLastItemQuantity (state, quantity) {
    if (state.items.length === 0) return
    // 复制最后一个商品对象，避免直接修改原state
    const updatedLastItem = { ...state.items[state.items.length - 1], quantity }
    // 替换数组的最后一项并更新state
    state.items = [...state.items.slice(0, -1), updatedLastItem]
  }
}

然后修改组件中的方法：

methods: {
  setItems (value) {
    this.$store.commit('cart/updateLastItemQuantity', value)
  }
}

为什么原来的代码不行？ #

[...arr]和arr.slice()都是浅复制操作，它们只会复制数组本身，但数组内的对象依然是原对象的引用。当你直接修改items.slice(-1)[0].quantity时，实际上是在修改Vuex state中对象的属性，这就绕过了mutation handlers，触发了Vuex的安全警告。

内容的提问来源于stack exchange，提问作者Vincent Decaux