解決$store.getters調用不執(zhí)行的問題
更新時間：2019年11月08日 16:01:27 作者：莫小龍
今天小編就為大家分享一篇解決$store.getters調用不執(zhí)行的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
api：https://vuex.vuejs.org/zh/guide/getters.html
場景：
在登錄時將登錄得到的用戶信息存儲在vuex的state和sessionStorage中。使用時在state中獲取，當因為刷新等原因導致state中沒有數(shù)據(jù)時，去sissionStorage中獲取。
錯誤：
登錄后，需要獲取用戶信息時，getters中屬性的方法不會執(zhí)行。只是去getters中獲取緩存
解決方法：
將getters中的屬性改寫成方法，這樣每次調用的時候就會執(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()
鉆研不易，轉載請注明出處。。。。。。
以上這篇解決$store.getters調用不執(zhí)行的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
下面小編就為大家分享一篇vue項目中使用ueditor的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本篇文章主要介紹了vue指令以及dom操作詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了vue element自定義表單驗證請求后端接口驗證，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
在項目開發(fā)中,有兩個功能特別類似,如果單獨實現(xiàn),會有很多重復的代碼，這時候就會用到邏輯復用，本文主要介紹了vue3?邏輯復用的實現(xiàn)示例，具有一定的參考價值，感興趣的可以了解一下2024-02-02
vue如何使用watch監(jiān)聽指定數(shù)據(jù)的變化
這篇文章主要介紹了vue如何使用watch監(jiān)聽指定數(shù)據(jù)的變化，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue父組件如何獲取子組件的值,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要為大家介紹了Vue2?中的數(shù)據(jù)劫持簡寫示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
本篇文章主要介紹了vue之nextTick全面解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了詳解Vue2.5+遷移至Typescript指南，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
網站頁面的響應速度與用戶體驗息息相關,直接影響到用戶是否愿意繼續(xù)訪問你的網站,所以這篇文章主要給大家介紹了關于Vue項目打包、合并及壓縮優(yōu)化網頁響應速度的相關資料,需要的朋友可以參考下2021-07-07