错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态。 NUXT答案

【问题标题】：Error: [vuex] do not mutate vuex store state outside mutation handlers. NUXT错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态。 NUXT
【发布时间】：2020-04-08 13:06:18
【问题描述】：

我正在使用 Nuxt 和 nuxt-vuex-localstorage 当我从 v-for 更改一个项目并且它的元素在商店内时，我收到一个错误...

<v-btn
              @click="addCurrentProduct( subItem)"
              v-if="!subItem.carrito"
              color="green"
              dark
              >Agregar</v-btn
            >
            <v-row v-if="subItem.carrito">
              <v-btn @click="subItem.cantidadCarrito--,removeProduct(subItem)" color="green" icon dark>
                <v-icon>mdi-minus-circle-outline</v-icon></v-btn
              >
              <span>{{
                subItem.cantidadCarrito
              }}</span>
              <v-btn @click="subItem.cantidadCarrito++,addProduct(subItem)" color="green" icon dark>
                <v-icon>mdi-plus-circle-outline</v-icon></v-btn
              >
            </v-row>

methods: {
    addCurrentProduct( product) {
      product.cantidadCarrito++;
      product.carrito = true;
      console.log("error")
      let temp=product
      this.$store.commit("localStorage/Sum_Cantidad");
      this.$store.commit("localStorage/ADD_PRODUCT", temp);


    },
addProduct(producto) {
      var temp = this.buscar(producto);   
      producto.carrito = true;   

      this.$store.commit("localStorage/ReNew_PRODUCTO", {
        index: temp,
        producto: producto
      });

      this.$store.commit("localStorage/Sum_Cantidad");
    }

我在 subItem.cantidadCarrito++ 中有错误，我认为它们与 Vuex 商店 (Nuxt) 连接，当我更改它的元素时，vuex 内部的元素也发生了变化，我得到了错误

【问题讨论】：

使用扩展运算符制作对象的副本。 var newObject = {...product, carrito: true, cantidadCarrito++}
我不明白...如果我这样做了，我会在重新加载时丢失数据...我点击按钮 addproduct 时出错了，在一切正常之前，addCurrentProduct运行良好，然后不......这是相同的方法，idk发生了什么
如果您想保持与商店中的对象的反应性，可以使用 getter/setter。
我正在使用 nuxt...

标签： node.js vue.js nuxt.js

【解决方案1】：

我解决了这个问题，将它从 localstorage 更改为 vuex 存储，当我第一次放置一个项目时，这个元素会自动与 localstorage 连接，我无法从本地进行任何更改。

【讨论】：