vue中，页面监听store中数据 的变化以及时做出相应，watch、computed与store的getter属性协调

vue中，页面监听store中数据 的变化以及时做出相应，watch、computed与store的getter属性协调

如题目所示，今天来讲一个非常简单但是非常常见的使用场景。假设在用户登录的时候，store会全局用户的相关信息，当用户退出登录后，store里面的信息会清空，同时，在某一个页面，内容很多，你不想每次进入的时候都通过刷新一下来重新获取store内容，而是想要自动地监听store对应内容的变化，来自己做出响应。那么就可以参考下面的做法：
涉及到的设计内容：

• store
• watch
• computed

---

假设我现在有一个登录页面，在store存在用户信息时跳转到主页，如果没有，从主页跳转回登录页，也就说只有登录才可以访问主页：
登录页面如下所示：

<template>
    <div>
        登录
        <button type="button" @click="changename">change</button>
    </div>
</template>
<script>
import store from '@/store'
export default {
  data () {
    return {
      name: ''
    }
  },
  methods: {
    changename () {
      store.commit('getinfo', { name: 'zsy' })
    }
  }
}
</script>

然后在store中有如下信息：

export default new Vuex.Store({
  state: {
    name: 'xjd',
    stunumber: '',
    school: '',
    sex: ''
  },
  getters: {
    getname (state) {
      return state.name
    }
  },
  mutations: {
    getinfo (state, a) {
      state.name = a.name
      state.stunumber = a.stunumber
      state.school = a.school
      state.sex = a.sex
    }
  },

那么我们的需求就是，当store中的name变化，登录页面可以监听到，然后进行判断，决定要不要跳转。所以我的登录页面有一个按钮，点击之后可以触发mutation中的更改函数，去更改name这个属性，那么该如何使得store中的name改变后，登录页面可以主动监听到？
使用watch和computed、store.getter！
简单来说，就是通过登录页面的computed计算属性，写一个函数，然后返回的是所要监听store中的某个属性，注意这个属性的返回必须使用getter，不能直接使用store.state来访问！

//store
  getters: {
    getname (state) {
      return state.name
    }
  },
  //登录页面
  computed: {
    getname () {
      return store.getters.getname
    }
  },

然后，通过watch监听这个computed函数：

  watch: {
    getname (newvalue, oldvalue) {
      console.log(newvalue)
    }
  },

这样子，就可以达到点击button，更改store.state中的name属性时，会被登录页面所监听到了！
控制台输出zsy，意味着新的值zsy已经被获取，你就可以做自己要做的功能了：

同样的，如果需要在主页做跳转，只需要重复上述处理，如果发现name变成 ‘ ’（空），就跳回登录页面。