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

Question

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的更新，想知道为什么，求大神些解惑

Answer 1

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

Answer 2

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

Answer 3

需要使用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); }
  }
}

Answer 4

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

Answer 5

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

Answer 6

我认为你在 mutations 中的代码是存在问题的。
我模拟了一下你这个流程，也尝试了你 mutations 中的代码。

在 mutations 中，你应该直接去给 userState 赋值，而不是使用 Object.assign 的方式。

经过以上两种赋值方式的测试：
Object.assign 合并对象这种方式并不会触发 getter 的监测。

直接使用 state.xxx = xxx 赋值
或者
直接去修改 state 中对象的某个属性值 state.obj.name = 'xxx' 都可以触发 getter

---

userSignout:function(state) {
  sessionStorage.removeItem('user');
  Object.keys(state.userstate).forEach(k => Vue.delete(state.userstate, k))
} 

你的这段代码中也是存在问题的。
Vuex 中的数据应该没有挂载到 vue 实例上面，vuex 中使用 Vue.$set 等方法都是无效的