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

Posted 2023-03-16

【中文标题】错误：[vuex] 不要在突变处理程序之外改变 vuex 存储状态。 NUXT

【英文标题】：Error: [vuex] do not mutate vuex store state outside mutation handlers. 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...

【参考方案1】：

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