Vuex: 实现同级组件的简单通信

1. Vuex 是什么？

Vuex 是专门为Vue 组件化思想带来的组件间通信问题提供的解决方案，主要解决以下两个问题：

• 多个视图依赖于同一状态
• 来自不同视图的行为需要变更同一状态

2. 核心概念

• State: 可以简单理解为Vue 维持的全局变量（状态）。
• Getter: 获取State 中的状态的方法，可以在取出前对数据进行二次处理。
• Mutation: 是改变State 中的状态的唯一方法，只能是同步操作。
• Action: 改变State 中的状态的方法，Action 提交的是mutation，而不是直接改变状态，与Mutation 不同的是Action 可以包含任意异步操作。
• Module: 将复杂应用中的状态分模块保存，这里不进行讨论。

3. 需求场景分析

3.1 组件树结构

Page (主页面)

|-- NavBar (顶部导航栏)

|-- LocationText (当前所在位置)

|-- SideBar (左侧菜单栏)

|-- UserListUnit (用户列表组件)

|-- modalEditStatus (更改用户状态弹框)

3.2 实现效果

在modalEditStatus 中成功编辑用户状态后，通知UserListUnit 组件重新发送ajax 请求刷新自身内容。

即实现modalEditStatue 组件与UserListUnit 组件的通信。

4. 如何实现

思路：在modalEditStatus 组件中更新用户状态成功以后，改变State 中控制刷新的变量的值（变为true）。UserListUnit 察觉到了这个值的变化，进行刷新，然后重置该变量的值（变为false）。