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