nuxt中vuex数据持久化

在nuxt中使用vuex,为了数据持久化使用vuex-persistedstate，但是在使用中发现找不到window对象，因此需要借助cookie来完成。

一、使用vuex-persistedstate

npm install --save vuex-persistedstate

import createPersistedState from "vuex-persistedstate"
import vuex from 'vuex'
const conststore = new vuex.Store({
    // ...
    plugins: [createPersistedState({
        storage: window.sessionStorage,
        reducer(val) {
            return {
                //各种操作
            }
        }
    })]
})

二、使用js-cookie

npm install --save js-cookie

在plugins中新建文件localStorage.js

import createPersistedState from 'vuex-persistedstate';
import * as Cookies from "js-cookie";

let cookieStorage = {
  getItem: function(key) {
    return Cookies.getJSON(key);
  },
  setItem: function(key, value) {
    return Cookies.set(key, value, {expires: 3, secure: false});
  },
  removeItem: function(key) {
    return Cookies.remove(key);
  }
};

export default (context) => {
  createPersistedState({
    storage: cookieStorage,
    getState: cookieStorage.getItem,
    setState: cookieStorage.setItem
  })(context.store);
};

在nuxt.config.js中新增

  plugins:  [{ src: '@/plugins/localStorage.js', ssr: false }],

这两者结合使用，会发现页面刷新后保存在vuex中的数据仍然有效，不会回到初始数据。