今天写代码的时候遇到一个很奇怪的问题,getter里面取到的值怎么都不是最新的。
调用setAuth清空后,从vue开发工具(vue-Devtools)中查看,state.auth
已经正常被设置成了空值。但是getters
或mapGetters
取到的还是更新前的值。
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex);
export default new Vuex.Store({ state: { auth: "" }, getters: { getAuth(state) { let localuser = window.localStorage.getItem("auth"); if (localuser) { return localuser; } return state.auth; } }, mutations: { setAuth(state, value) { window.localStorage.setItem("auth", value); state.auth = value; // Vue.set(state, "auth", value); } } });
|
网上查了资料,有人说是无法跟踪state
,让使用Vue.set(state, "auth", value)
,就是上面注释掉的代码。但其实也是无效的。
最后终于找到了解决方法,那就是在getters的方法里面一定要返回state.auth
,绝对不能返回其他值。最终修改后是下面的样子
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| import Vue from "vue"; import Vuex from "vuex"; import state from "./state"; Vue.use(Vuex);
export default new Vuex.Store({ state, getters: { getAuth(state) { let localuser = window.localStorage.getItem("auth"); if (localuser) { state.auth = localuser; } return state.auth; } }, mutations: { setAuth(state, value) { window.localStorage.setItem("auth", value); state.auth = value; // Vue.set(state, "auth", value); } } });
|