vue如何监听cookie的改变

Question

computed: {
      ...mapState({
        token: state => state.login.token,
        username: state => state.login.username,
        avatarUrl: state => state.login.avatarUrl,
        birthday: state => state.login.birthday,
        gender: state => state.login.gender,
        id: state => state.login.id,
        mobile: state => state.login.mobile,
      })
    },
    
    
store/login.js

const state = {
  username:getCookie("username"),
  avatarUrl:getCookie("avatarUrl"),
  birthday:getCookie("birthday"),
  gender:getCookie("gender"),
  id:getCookie("id"),
  mobile:getCookie("mobile"),
  token:getCookie("token"),
};
const mutations = {
  LOGIN(state,res){
    window.localStorage.clear();
    setCookie("token",res.data.token);
    setCookie("username",res.data.user.username);
    setCookie("avatarUrl",res.data.user.avatarUrl);
    setCookie("birthday",res.data.user.birthday);
    setCookie("gender",res.data.user.gender);
    setCookie("id",res.data.user.id);
    setCookie("mobile",res.data.user.mobile);
  },
}

如上，登录的时候我把返回的值存为cookie，可是我登录之后跳转的个人中心页面依然显示的是未登录的样子，只有刷新一下才可以显示登录之后的，该怎么监听？

Answer 1

同意faima的答案，状态可以来源于cookie或webstorage，之后通过vuex或其他状态机制更新(以vue状态称以示区别)，视图是被vue状态驱动而非被cookie驱动，因此和vue的双向绑定的概念不同，监控cookie本身其实并没有什么意义。如果一定要做，有两种方案：1.最傻瓜的办法，在有路由更新的场景，添加守卫，每次获取cookie的值之后再进行路由变更；在request和response上添加拦截器获取并更新cookie，缺点是不利于维护且需要同步执行否则可能导致状态没有及时更新；2.通过页面通信，从外部获取状态并更新到vue状态，组件可以通过vuex实现组件之间的状态传递。

Answer 2

不能监听cookie，应该做页面通信，在登录成功后更新个人中心页面

Answer 3

在 MVVM 的架构中，Cookie 一般是作为“M”，也就是 Model 存在，用来存储和持久化数据。如果你想在视图上看到效果，需要把数据放在 VM 里，所以，下面你应该在 setCookie 的同时也把值赋给 state。