解决$store.getters调用不执行的问题

2022-01-14,,,,

今天小编就为大家分享一篇解决$store.getters调用执行的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

api:https://vuex.vuejs.org/zh/guide/getters.html

场景:

在登录时将登录得到的用户信息存储在vuex的state和sessionStorage中。使用时在state中获取,当因为刷新等原因导致state中没有数据时,去sissionStorage中获取。

错误:

登录后,需要获取用户信息时,getters中属性的方法不会执行。只是去getters中获取缓存

解决方法:

将getters中的属性改写成方法,这样每次调用的时候就会执行,去从新获取数据。

 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调用不执行的问题的详细内容,更多请关注本站其它相关文章!

《解决$store.getters调用不执行的问题.doc》

下载本文的Word格式文档,以方便收藏与打印。