快捷導(dǎo)航

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

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

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

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

Nuxt中有個(gè)nuxtServerInit方法。

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

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

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

Nuxt使用Vuex持久化踩坑

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

這個(gè)時(shí)候我們可以使用Vuex持久化，我們可以使用vuex-persistedstate。

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

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

vue-persistedstate.js完成以后我們?cè)趎uxt.config.js文件下

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

這樣子我們可以在其他組件上使用但是使用時(shí)會(huì)遇到一個(gè)問題

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

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

解決方法

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

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

這樣子就可以獲取了。