快捷導(dǎo)航

Nuxt如何實現(xiàn)將服務(wù)測數(shù)據(jù)存儲到Vuex中

更新時間：2023年10月11日 09:28:52 作者：Endless Dreamer

這篇文章主要介紹了Nuxt如何實現(xiàn)將服務(wù)測數(shù)據(jù)存儲到Vuex中的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Nuxt將服務(wù)測數(shù)據(jù)存儲到Vuex中

Nuxt中有個nuxtServerInit方法。

Nuxt 調(diào)用它的時候會將頁面的context上下文對象作為第2個參數(shù)傳給它（服務(wù)端調(diào)用），與fetch一樣，不包括context.redirect和context.error方法，當(dāng)我們想要將服務(wù)端的一些數(shù)據(jù)傳到客戶端，可以通過這個獲取保存在狀態(tài)中，客戶端再從狀態(tài)里取。

const actions = {
  nuxtServerInit({ commit}, {req}) {
    console.log('req.session', req.session)
  }
}

注：必須配置在Vuex中的index配置。

Nuxt使用Vuex持久化踩坑

在使用nuxt中我們沒辦法去使用sessionStorage和localStorage去進行儲存一些數(shù)據(jù)例如token，

這個時候我們可以使用Vuex持久化，我們可以使用vuex-persistedstate。

在plugins文件下我們創(chuàng)建一個vue-persistedstate.js文件進行全局：大概代碼如下

// 引入插件
import createPersistedState from 'vuex-persistedstate'
// 把翻轉(zhuǎn)好的Store引入
import { Store } from '~/store';
// 把引入的Store儲存一下
var stores=Store
export default ({ Store }) => {
    window.onNuxtReady(() => {
      createPersistedState({
            key: "Store", // 讀取本地存儲的數(shù)據(jù)到store
        })(stores)
    })
}

vue-persistedstate.js完成以后我們在nuxt.config.js文件下

plugins: [
   { src:'@/plugins/element-ui'},
    { src: '@/plugins/vue-persistedstate.js', ssr: false }
  ],

這樣子我們可以在其他組件上使用但是使用時會遇到一個問題

// 沒有Store.state是可以看到我們vuex里是有儲存數(shù)據(jù)的
console.log('Store',Store);
// 但是我們Store.state以后就拿不到數(shù)據(jù)了
console.log('Store.state',Store.state);

Store.state的里面沒有數(shù)據(jù)例如我在login文件下儲存了token，可以通過Store.state.login.token獲取到，但是Vuex持久化以后Store.state.login.token獲取到的是undefined我在生命鉤子中mounted里面的獲取調(diào)用的，

解決方法

我們給他加個定時器就可以了，但是這樣子又有一個問題了，我們在axios請求攔截時雖然可以通過定時器獲取但是會影響數(shù)據(jù)返回，這個時候我們可以在我們之前翻轉(zhuǎn)好的里面讓他變成同步操作

import createPersistedState from 'vuex-persistedstate'
import { Store } from '~/store';
var stores=Store
export default ({ Store }) => {
// 把async和await加上
    window.onNuxtReady(async() => {
      await  createPersistedState({
            key: "Store", // 讀取本地存儲的數(shù)據(jù)到store
        })(stores)
    })
}

這樣子就可以獲取了。