浅谈Vuex的理解

一、Vuex 是什么？

          Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

---

二、Vuex原理是什么？

         

             Vuex实现了一个单向数据流，在全局拥有一个State存放数据，所有修改State的操作必须通过Mutation进行，Mutation的同时提供了订阅者模式供外部插件调用获取State数据的更新。所有异步接口需要走Action，常见于调用后端接口异步获取更新数据，而Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。最后，根据State的变化，渲染到视图上。Vuex运行依赖Vue内部数据双向绑定机制，需要new一个Vue对象来实现“响应式化”，所以Vuex是一个专门为Vue.js设计的状态管理库。

---

三、vuex创建公有仓库的插件

       1、储存公共状态 

       2、能够根据事件来修改状态

       3、多个组件都需要变化，有机制把这个新的状态通知给所有的组件

---

四、vuex中的四个类分别是什么？

       1、state    定义需要共享的状态

       2、mutations  用来修改state中的状态值的地方

       3、actions 用来接收外部事件的请求，筛选条件  支持异步操作

       4、getters  用来获取处理好的状态的地方（新的状态）

---

五、vuex核心流程是什么？

1. Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
2. dispatch：操作行为触发方法，是唯一能执行action的方法。
3. actions：操作行为处理模块。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。
4. commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
5. mutations：状态改变操作方法。是Vuex修改state的唯一推荐方法，其他修改方式在严格模式下将会报错。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。
6. state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
7. getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

---

六、实例讲解

        6.1、挂载跟级别数据/事件

                  最简单的实现方式，就是把所需state，getter，mutations，actions等直接挂在根级别上，当然这样会导致根级别特别混乱，这个时候就引出了modules，下面会讲到。

import Vue from 'vue'
import Vuex from 'vuex'
 
 
Vue.use(Vuex)
 
// 根state
const state = {
	testField: "444"
}
 
// 根getter
const getters = {
	getTestField(state) {
		return state.testField;
	}
}
 
export default new Vuex.Store({
	state,
	getters
})

        6.2、dispatch

  下面的前提都是在命名不规范，所有action全部一样的情况下（极端情况）,如果命名规范，那就正常调用即可。

  

    // 默认查找所有不存在namespaced: true,属性的module和根级别下的action
    this.$store.dispatch("setTestFieldAction", "I did");
    // 如果想调用module下的action，需要有namespaced: true,属性
    this.$store.dispatch("modules_2/setTestFieldAction", "I did 2 ");
    // unknown action type: modules_1/setTestFieldAction
    this.$store.dispatch("modules_1/setTestFieldAction", "I did 1 ");

当然，actions的使用和getter一样，方法异曲同工，在此列举一种方式，其他方式，可以私下试一下，也是完全可行的。

methods: {
    // 使用actions的辅助函数，方式和mapGetters同理
    ...mapActions({
      mdu_2: "modules_2/setTestFieldAction"
    })
  },
mounted() {
    // 使用辅助函数mapActions
    this.mdu_2("I do 2");
  }

        6.3、 模块间调用

 vuex中各个modules间的交互，当然，是可以直接使用的，毕竟都是挂载在store上的。但，说的是另一种，rootState, rootGetters，rootMutations，rootActions这四种。

    6.3.1 rootGetters和rootState---- 使用方式很简单，就把它当成对象调用即可。

getTestField(state, getters, rootState, rootGetters) {
	console.log(state, "state");
	console.log(getters, "getters");
	console.log(rootState, "rootState");
	console.log(rootGetters, "rootGetters");
	return state.testField_1 + rootGetters["modules_2/getTestField"];
},

 6.3.2、commit 的 dispatch

// modules_1.js
actions: {
	setTestFieldAction({ dispatch, commit, getters, rootGetters }) {
		console.log(commit, "commit");
		dispatch("modules_2/setTestFieldAction2", "rrrrrr", { root: true })
		commit("setTestFieldMutation", "testField_1");
		commit("setTestFieldMutation3", "dddddd", { root: true });
	},
},

到此就可以了，vuex基本可以在各个模块中交互，引用其他模块的state和action，