关于VUEX的GETTERS中属性更新问题

1.官方API说:Vuex 允许我们在 store 中定义getters(可以认为是 store 的计算属性),但是我在我的学习项目里,发现getters中定义的属性没有随state输入而更新,要手动刷新一次页面getters中的属性才更新;
2、具体代码实现是这样的(其中一个片段):

const userstore = new Vuex.Store({  
  state: {  
    userstate:JSON.parse(sessionStorage.getItem('user')) || {}
  },  
  getters:{
    logstate:function(state){
      console.log("fhg:"+(state.userstate.id===undefined));//没登录时,userstate是一个空对象;
        return (state.userstate.id===undefined);
    }
  })

3、我用vue-devtool查看,观察到的结果是如图1登录前,和图2登录后
登录前,原始状态
登录后

观察结果是,userstate状态更新后,没有触发getters的更新,想知道为什么,求大神些解惑

回答:

首先你是通过sessionStorage的变化去导致state的改变,没有按照官网上的提交mutation,其次你在state里面定义了一个空对象userstate,为对象新增属性不能直接赋值,因为不是响应式,要用$set图片描述

图片描述

回答:

在文件顶部先引用vue,mutaions里面这样写,Vue.set(state,’userstate’,user);通过这种方式就可以触发getters的更新

回答:

需要使用mutation手动触发state更新吧。

const userstore = new Vuex.Store({  
  state: {  
    userstate: {}
  }, 
  mutations: {
    SETUSERSTATE(state, user) {
      state.userstate = user || JSON.parse(sessionStorage.getItem('user')) || {};
    }
  },
  actions: {
    setUserState: ({commit}, data) => { commit('SETUSERSTATE', data); }
  }
}

回答:

我刚刚也遇见这个问题
在motation里面的触发方法里面不能直接使用state赋值的方式
需要使用Vue.set(state.data, type, value)即可触发状态更新

回答:

我也遇到了楼主的问题,找不出答案,楼主找到后望告知,由于找不到,我在获取是使用this.$store.state来获取

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注