Nuxt引入vue-persistedstate以及踩坑記錄

更新時間：2023年10月11日 10:41:06 作者：小白白哦(??????)?

這篇文章主要介紹了Nuxt引入vue-persistedstate以及踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

前言

項目需求，需要vuex進行路由持久化保存，結合nuxt框架進行記錄。

思路

監(jiān)聽數(shù)據(jù)變化, 每當?shù)卿浲戤?

vuex 數(shù)據(jù)發(fā)生變化,就要將數(shù)據(jù)保存到瀏覽器本地 (指用戶瀏覽器localStorage)

頁面打開時, 會嘗試將之前保存過的數(shù)據(jù)恢復到 vuex 當中即可

有點復雜, 找個插件幫忙

實現(xiàn)緩存信息到本地

nuxtjs中store不能直接使用瀏覽器的lcoalStorage方法，

而且自己寫數(shù)據(jù)同步功能比較麻煩,

所以我們需要依賴一個插件vuex-persistedstate，該插件會把本地存儲的數(shù)據(jù)存儲到store。

引入方法

1.安裝

npm install vuex-persistedstate  --save

nuxt.config.js配置文件

plugins: [
    '@/plugins/element-ui',
    // '@/plugins/localStorage'
    // 這里的引入, 如果是普通字符串, 就在服務端馬上運行
    // 如果是要等到瀏覽器再運行的代碼可以將配置改為對象, 并且 路徑作為 src 傳進去
    {
      src: '@/plugins/localStorage',
      // 如果只在瀏覽器加載的代碼, 可以添加一個 屬性 ssr: false
      ssr: false
    }
  ],

plugins/localStorage.js

console.log('測試自定義插件')
// 在這個自定義插件中配置 vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'
// 這里什么都可以寫, 不過如果你需要用到 nuxt 本身, 必須通過 export 的方式暴露函數(shù)來接收
export default ({store}) => {
    // 如果想要等到 nuxt 加載完畢
    // 再執(zhí)行代碼, 有一個函數(shù)叫做 window.onNuxtReady()
    window.onNuxtReady(()=>{
        createPersistedState({
            // 在這里其實, 是想要將 vuex 數(shù)據(jù)存放到 localStorage 里面
            key: 'store'
        })(store)
    })
}

2.使用

store/index.js

// 用戶管理
export const state = () => ({
    //采用接口返回的數(shù)據(jù)結構
    userInfo: {
        // token: '',
        // user: {}
    }
})
// 測試
// export const state = () => {
//     return {
//         // 這里是全局狀態(tài)數(shù)據(jù)保存的地方
//         abc: 123
//     }
// }
// 修改 state 里面的數(shù)據(jù), 必須使用 mutations 里面的函數(shù)
export const mutations = {
    // 每個屬性都是一個函數(shù), 作為修改 state 的方法
    // setAbc(state, data) {
    // 每個 mutation 函數(shù)都可以接受到兩個參數(shù)
    // 第一個是 state 對象本身
    // 第二是調用函數(shù)時額外添加的數(shù)據(jù)
    // 這里需要做的就是改變 state 數(shù)據(jù)
    // state.abc = data
    // 這樣外面調用這個函數(shù), 并且傳入數(shù)據(jù), 即可改變當前的 abc 屬性
    setUserInfo(state, data) {
        state.userInfo = data
    }
};

項目中需要存儲的地方：

 //將結果發(fā)送到剛剛新建的vuex中，存儲，實現(xiàn)狀態(tài)持久化，不然刷新之后數(shù)據(jù)就沒了
 this.$store.commit('userstore/setUserInfo',res.data)

項目中需要使用的地方：

computed:{
        userInfo(){
            return this.$store.state.userstore.userInfo
        }
    },
    ----------渲染頭像-----------------
     <el-dropdown v-if="userInfo.token">
     <img :src="baseURL+userInfo.user.defaultAvatar"/>
        {{userInfo.user.nickname}}

修改完后重新啟動項目即可。