解決$store.getters調(diào)用不執(zhí)行的問題
api:https://vuex.vuejs.org/zh/guide/getters.html
場景:
在登錄時將登錄得到的用戶信息存儲在vuex的state和sessionStorage中。使用時在state中獲取,當(dāng)因為刷新等原因?qū)е聅tate中沒有數(shù)據(jù)時,去sissionStorage中獲取。
錯誤:
登錄后,需要獲取用戶信息時,getters中屬性的方法不會執(zhí)行。只是去getters中獲取緩存
解決方法:
將getters中的屬性改寫成方法,這樣每次調(diào)用的時候就會執(zhí)行,去從新獲取數(shù)據(jù)。
getloginInfor: (state) => () => {}
代碼:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { /* 登錄用戶信息 */ loginInfor: { } }, mutations: { setloginInfor (state, msg) { state.loginInfor = msg } }, actions: { }, getters: { getloginInfor: (state) => () => { // 先從state里面獲取用戶登錄信息 let loginInfo = state.loginInfo // 如果 state 里面獲取不到,那么從localStorage里面獲取 if (!loginInfo) { loginInfo = JSON.parse(sessionStorage.getItem('loginInfo')) } return loginInfo } } })
使用:
this.$store.getters.getloginInfor()
鉆研不易,轉(zhuǎn)載請注明出處。。。。。。
以上這篇解決$store.getters調(diào)用不執(zhí)行的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue如何使用watch監(jiān)聽指定數(shù)據(jù)的變化
這篇文章主要介紹了vue如何使用watch監(jiān)聽指定數(shù)據(jù)的變化,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue項目打包、合并及壓縮優(yōu)化網(wǎng)頁響應(yīng)速度
網(wǎng)站頁面的響應(yīng)速度與用戶體驗息息相關(guān),直接影響到用戶是否愿意繼續(xù)訪問你的網(wǎng)站,所以這篇文章主要給大家介紹了關(guān)于Vue項目打包、合并及壓縮優(yōu)化網(wǎng)頁響應(yīng)速度的相關(guān)資料,需要的朋友可以參考下2021-07-07