vue-cli項目中，我們可以用vuex-persistedstate，它可以使vuex的狀態持久化，頁面刷新都不會丟失，原理當然是localStorage啦！當然也可以使用vue-cookies進行保存token，問題來了，nuxt項目怎么保存登錄狀態呢？當然上面這兩種方法我們都可以使用，但是有個問題，由於在created鈎子中不存在window對象(獲取cookie、localStorage都需要window對象)，當你需要判斷是否存在token的時候，你必須要在mounted進行操作，這說明頁面進來的一瞬間你無法得知是否已經登錄了，這會導致顯示用戶名、組件顯示於隱藏都慢半拍
nuxt非常友好，它提供了fetch鈎子，還有nuxtServerInit，這兩個鈎子都運行在服務端並且我們能很快速地操作store
1、fetch的使用
如果頁面組件設置了fetch方法，它會在組件每次加載前被調用（在服務端或切換至目標路由之前），此方法需要跟服務端的人員配合
<script> export default { async fetch ({ app, store, params }) { let { data } = app.$axios.get('/token'); store.commit('setToken', data.token); } } </script>
2、nuxtServerInit
狀態樹文件中指定了nuxtServerInit方法，Nuxtjs調用它的時候會將頁面的context上下文對象作為第2個參數傳給它以供服務端調用，與fetch一樣，不包括context.redirect和context.error方法，具體哪些參數可以查看官方文檔。當我們想要將服務端的一些數據傳到客戶端，可以通過這個獲取保存在狀態中，客戶端再從狀態里取
終極無敵方法nuxtServerInit：先把token存入cookie，這樣每次請求都會自帶cookie，那么利用nuxtServerInit里的參數 {req, res}，去獲取到請求附帶的cookie，然后解析出token，然后再存入vuex。
import Vuex from 'vuex' let store = () => new Vuex.Store({ state: { token: '' }, mutations: { setToken (state, token) { state.token = token } }, actions: { nuxtServerInit({ commit }, { req }) { let cookie = req.headers.cookie; // 將cookie轉成json對象（自己實現該方法）
let token = cookieparse(cookie).token; commit('setToken', token); }, } }) export default store