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

Question

我目前正在构建一个简单的购物车，并且想知道每次我执行以下所示的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
      })
}


},

Answer 1

您可以将nuxt-storage用于nuxtjs项目或在非ssr vue项目中定义了Windows的基本javascript。

    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时，导出突变，动作，吸气剂和状态的结构不同，应予以考虑。

如果commit（'saveCart'）;不起作用尝试this.commit（'saveCart'）; 试用blog post to see example code of a persisted cart