原文：https://blog.csdn.net/Tomwildboar/article/details/97616705
弄了幾個小時，才算是解決nuxt刷新vuex失效的問題。
vuex-persist 方法在線上使用的時候會報錯。所以建議直接使用localStorage，或Cookile方法
下面具體演示，都以state中的token為例
使用vuex-persist線上報錯的原因
線上發布使用的是node，但是在node里面沒有window這個對象。初始化vuex-persist的時候使用到了window
如果你非要使用window對象，必須在mounted(){}方法里面使用，至於為啥我也不知道，反正事實就是這樣的。
vuex-persist
第一步：安裝
npm i vuex-persist
1
第二步：配置
2-1：創建vuex-persist.js （在plugins下面)
import VuexPersistence from 'vuex-persist'
export default ({ store }) => {
window.onNuxtReady(() => {
new VuexPersistence({
/* your options */
}).plugin(store);
});
}
1
2
3
4
5
6
7
8
2-2：配置nuxt.config.js
{ src: '~/plugins/vuex-persist', ssr: false },
1
2-3：修改store/vuex
import VuexPersistence from 'vuex-persist'
plugins: [new VuexPersistence().plugin]
1
2
最后說一下設置token的問題（這也是個坑）
官方推薦這樣設置 $axios.setHeader(‘X-Access-Token’, store.state.token)
這樣設置，會存在失效問題
這樣設置就好了 ‘config.headers.common[‘X-Access-Token’] = store.state.token
localStorage
1、獲取到了token，存入localStorage （其它state，中的數據也同樣如此）
window.localStorage.setItem("storeState",JSON.stringify(this.$store.state))
2、刷新頁面的時候，從localStorage 中，把數據轉存到store中去
mounted(){
//在頁面加載時讀取localStorage里的狀態信息
this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("storeState"))));
//在頁面刷新時將vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("storeState",JSON.stringify(this.$store.state))
})
}
1
2
3
4
5
6
7
Cookie,nuxtServerInit
nuxtServerInit 這個是Nuxt提供的方法，簡單說，就是在頁面刷新的時候，在到達頁面之前。給你去處理state數據方法。
我們把登錄的token存放在Cookie里面，然后在nuxtServerInit 方法里面去獲取Cookie里面的數據賦值到state
nuxtServerInit 文檔地址 https://zh.nuxtjs.org/guide/vuex-store/
唯一感覺這個方法不好的是：獲取cookie中的token的時候要對字符串進行處理，當然如果寫個utils也就解決了
1、安裝js-cookie，可以選擇npm，我這里選擇CND
{ src: 'https://cdn.bootcss.com/js-cookie/2.2.1/js.cookie.min.js' },
2、把token，存入Cookie （后面那個7，是設置七天過期）
3、獲取並設置cookie
————————————————
版權聲明：本文為CSDN博主「小道仙」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Tomwildboar/article/details/97616705