nuxt 目前最好的解決服務端存儲Cookie的方法

原文：https://blog.csdn.net/qq_41810005/article/details/102587474

我了解nuxt團隊正在開發nuxtClientInit功能，但是在發布之前，您可以自己制作。要了解nuxt在有請求時承擔的工作流程，您可以在此處查看其生命周期。這表明首先調用nuxtServerInit，然后再調用中間件。在此中間件調用期間，將提供nuxt.config.js，其中包含您的自定義配置。其中一部分是“插件”，如文檔所述，

通過此選項，您可以定義在實例化根Vue.js應用程序之前應運行的JavaScript插件。

因此，如果您編寫一個插件來調用存儲操作，則可以從那里獲取並設置本地存儲。因此，從nuxt-client-init插件開始：

1.  
   //nuxt-client-init.client.js
2.  
   export default async context => {
3.  
   await context.store.dispatch('nuxtClientInit', context)
4.  
   }

然后將插件添加到nuxt.config.js：

1.  
   //nuxt.config.js
2.  
   plugins: [
3.  
   '~/plugins/nuxt-client-init.client.js'
4.  
   ],

如果您注意到此處的命名約定，則插件的.client.js部分會告訴nuxt這是僅客戶端的插件，並且是簡寫形式'{ src: '~/plugins/nuxt-client-init.js', mode: 'client' }'，因為nuxt 2.4是定義old的方式'{ src: '~/plugins/nuxt-client-init.js', ssr: false }'。無論如何，您現在都可以呼叫商店了，因此您可以采取措施從本地存儲器呼叫並設置狀態項。

1.  
   //store/index.js
2.  
   export const actions = {
3.  
   nuxtClientInit({ commit }, { req }) {
4.  
   const autho = localStorage.getItem('auth._token.local') //or whatever yours is called
5.  
   commit( 'SET_AUTHO', autho)
6.  
   console.log('From nuxtClientInit - '+autho)
7.  
   }
8.  
   }

您可能需要重新啟動應用程序才能使它全部生效，但是隨后您將獲得並使用您的身份驗證狀態，而無需進行任何麻煩的nuxtServerInit業務。