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）。

4.1 创建store.js 文件

在components 同级目录下创建store 文件夹，然后在store 文件夹下创建store.js 文件，文件内容如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 在这里添加需要全局维护的状态
const state = {
  // userListUnit是否需要刷新
  userListUnitReload: false
}

// getters 可根据需要使用
const getters = {

}

// actions 跟 mutations 作用相同，不过是异步操作
const actions = {
  
}

// mutations 修改共享状态 同步操作
// 在这里添加更改全局状态的方法
const mutations = {
  toggleUserListUnitReload (state) {
    state.userListUnitReload = !state.userListUnitReload
  }
}

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

4.2 在main.js 中引入store.js

import store from './store/store'

4.3 在modalEditStatus 更新成功的代码之后添加更改Vuex 状态操作，通知UserListUnit 重新获取数据

this.toggleUserListUnitReload()

但是modalEditStatus 此时是不认识toggleUserListUnitReload() 这个方法的，为了让它认识，我们还必须执行以下操作：

• 在modalEditStatus 组件中引入mapMutations

import { mapMutations } from 'vuex'

• 将toggleUserListUnitReload() 方法注册到modalEditStatus 组件的方法中

methods: {
  // 添加mutations方法映射
  ...mapMutations(['toggleUserListUnitReload']),
  OtherFunction (para) {
    // other code
  }
}

4.4 在UserListUnit 组件中监听Vuex 中状态的值，在发生变化时重发ajax 请求刷新页面

• 在UserListUnit 组件中引入mapState 和mapMutations

import { mapState, mapMutations } from 'vuex'

• 在computed 中添加接收Vuex 中状态的变量

computed: {
  // 这句话的意思是接收Vuex 中state 中的userListUnitReload 值并保存在本地的同名变量中
  ...mapState(['userListUnitReload']),
  nowChosenStatus () {
    // other code
  }
}

• 在watch 中监听变量的值，在正确的时机进行刷新

watch: {
  userListUnitReload: function (newV, oldV) {
    // 检查是否需要刷新页面
    if (newV) {
      this.GetUserInfo()
      // 重新将刷新设为false
      this.toggleUserListUnitReload()
    }
  }
}