Javascript 发生突变后，如何在Vuex中保留数组？（只是坚持不刷新浏览器）

我目前正在构建一个简单的购物车，我想知道如何在每次执行下面的addProduct时保存一个携带购物车数据的数组。保存这些数据不是为了永久保存，而是为了减轻浏览器刷新的影响吗？我知道vuex persistedstate，但在这种情况下如何应用它

import Vue from 'vue';
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
Vue.use(Vuex);

export const store = new Vuex.Store({

plugins: [
createPersistedState({
  getState: state.cartdata;
  setState: state.cartdata;
})
]

state: {
 cartdata: []
},

mutations: {
 deleteProduct: function(state, product){
  state.cartdata.splice(state.cartdata.indexOf(product), 1);
 },

addProduct: function(product){
      this.$store.state.cartdata.push({
        id: product.id,
        name: product.name,
        price: product.price,
        quant: 1
      })
}


},

---

您可以将nuxt存储用于nuxtjs项目或基本javascript，其中windows定义为非ssr vue项目

    import Vue from 'vue';
    import Vuex from 'vuex'
    import nuxtStorage from 'nuxt-storage';
    Vue.use(Vuex);

    // Without Nuxt-Storage
    let cartdata = window.localStorage.getItem('cartdata');

    // With Nuxt-Storage
    let cartdata = nuxtStorage.localStorage.getData('cartdata');


    export const store = new Vuex.Store({

    state: {
     // Check if imformation is stored in local storage or set arrar to empty
     cartdata: cartdata ? JSON.parse(cartdata) : [],
     // cartdata: []
    },

    mutations: {
     // Using destructuring to add state and commit

     deleteProduct: function({commit, state}, product){
      state.cartdata.splice(state.cartdata.indexOf(product), 1);
      commit('saveCart');
     },


    addProduct: function({commit}, product){
          this.$store.state.cartdata.push({
            id: product.id,
            name: product.name,
            price: product.price,
            quant: 1
          })
     commit('saveCart');
    },

    saveCart(state) {
        // With Nuxt-Storage
        nuxtStorage.localStorage.setData('cartdata', JSON.stringify(state.cartdata));

        // Without Nuxt-Storage
        window.localStorage.setItem('cartdata', JSON.stringify(state.cartdata));

      }


    },

注意：当用于nuxt时，导出突变、动作、getter和状态的结构是不同的，应该加以考虑

如果提交（'saveCart'）；不起作用。请尝试此操作。提交（'saveCart'）； 试一试