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