npm install vuex-persistedstate  --save

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

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

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

 //將結(jié)果發(fā)送到剛剛新建的vuex中，存儲(chǔ)，實(shí)現(xiàn)狀態(tài)持久化，不然刷新之后數(shù)據(jù)就沒(méi)了
 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}}