nuxt使用vue-persistedstate将vuex中state持久化

前言

项目需求SEO优化，使用nuxt进行服务端渲染，引入vue-persistedstate持久化状态保存

1. 安装

npm install vuex-persistedstate  --save

创建 plugins/vue-persistedstate.js

import createPersistedState from 'vuex-persistedstate';
import * as Cookies from "js-cookie";
　
//引入js-cookilet 
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);
  }
};

//vuex采用modules模式，只保存app moudle中的state

export default (context) => {
  createPersistedState({
    storage: cookieStorage,
    getState: cookieStorage.getItem,
    setState: cookieStorage.setItem,
    reducer(val){
      return {
        app: val.app　　　　//保存app module中的state，一定要key+value形式
      };
    }
  })(context.store);
};

nuxt.config.js配置文件

plugins: [
    { src: '~/plugins/vuex-persistedstate', ssr: false },
  ],

 

项目中需要set的地方：

 this.$store.commit('app/setUsername', value);

 

vuex-persistedstate 会自动更新cookie中的数据，加载后会自动get cookie中的数据cover vuex中的state