vue 在不使用 vuex 的情况下组件与组件之间的通信问题

Question

三个组件：

1. index.vue

2. register.vue

3. login.vue

说明一下彼此之间的关系：

• index.vue 包含 login.vue
  通过 prop 属性和 自定义事件 vue.$emit('xxx') 通信

---

• register.vue 包含 login.vue
  彼此通过 prop 属性和 自定义事件 vue.$emit('xxx') 通信

---

• index.vue 通过 <router-view> 到 register.vue
  彼此之间没有直接的关系

问题：
index.vue 和 register.vue 都包含一个登录按钮和登录状态：

    data() {  
          ifLogin: false; // 未登录
    }

当我点击 index.vue 的登录按钮，login.vue 会通过弹窗形式弹出，并且经过表单输入后点击登录，会把登录状态传回给 index.vue，然后 index.vue 的登录状态切换成 ifLogin: true 这一步已经完成没有问题很简单

---

当我点击 register.vue 的登录按钮，login.vue 也会通过弹窗形式弹出，并且经过表单输入后点击登录，会跳转到 index.vue 这个首页，但问题是 index.vue 中的登录状态没有切换，我需要刷新一遍登录状态才会变成 ifLogin: true 。我希望能不刷新页面 index.vue 的状态就切换。

---

不明白我问题的话思考一下，其实就是login.vue 分别给 index.vue 和 register.vue 都绑定了通信

---

如果不用 vuex 我这个问题有没有可以解决的办法。非常感谢

Answer 1

如果不用vuex保存登录状态的话，就我的想法来看，有两种办法。其一，就是在login中登陆成功后，将登陆状态保存到sessionStorage中，在每一次进入index中之间，都先判断下sessionStorage中的登录状态，如果为真，则将index中的状态置为真，如果为假，则isLogin不做改变，还是未登录；第二种就是可以在跳回到index的时候把isLogin为真作为query传递到index，再在index中判断传递过来的query。其实原理都是一样，只不过一个是query，另一个是sessionStorage罢了。就我的经验，登录状态用sessionStorage更合理些。