Vuex的相关总结

概念：Vuex 是 Vue 配套的公共数据管理工具，它可以把一些共享的数据保存到 vuex 中， 方便整个程序中的任何组件直接获取或修改我们的公共数据。

直白的来说，Vuex其实就是对项目中多个组件的共享状态进行集中式的管理。

状态管理包含以下几部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

状态图解：

Vuex的使用：

1. 在项目中安装 vuex          cnpm i vuex -D
2. 在 main.js 文件中，导入，并注册

import Vuex from 'vuex';
Vue.use(Vuex);

3. 使用的时候需要初始化一个 Vuex.Store 实例对象，具体过程如下：

const store = new Vuex.Store({
  state: {      //相当于Vue实例中的data   来存放store中的数据
  //state中的值只能通过 mutations 提供的方法来操作对应的数据，
    count: 0
  },
  
  /*
  	注意：mutations 中方法的参数只能传递两个参数
  		第一个参数：是 state 状态
  		第二个参数：是通过 commit 来调用方法时提交过来的参数，（可以是对象、数组等）
  */
  mutations: {       //这里来操作state中的数据   相当于Vue实例中的methods
    increment (state) {
      state.count++
    }
    subtract(state,obj){
		state.count -= (obj.c + obj.d);
	}
  },

  //使用getters来包装数据
  getters: {
  	/*
		注意：此处的 getters 只负责对外提供数据，不负责修改数据，若要修改state中的数据，需要在mutations中修改
		使用方法：this.$store.getters.optCount
		getters 和 过滤器 filter 类似，都没有修改数据，只是把原数据做了包装，提供给了调用者
	
		还可以通过 mapGetters 来获取
		在对应的组件页面导入     import {mapGetters} from 'Vuex';
		在计算属性computed中实时监听    ...mapGetters(['***','***']);
		使用插值表达式直接来拿使用即可
 	*/
	optCount: function(state){
		return "当前最新的count值：" + state.count;
	}
  }
  
})

//需要在Vue实例中挂载
Var vm = new Vue({
	store:store
});
/*
	可以访问状态对象store.state，并使用以下store.commit方法触发状态更改：
	例如：在别的文件中使用此处的全局的数据或方法
			this.$store.state.count   或     this.$store.commit("方法名称");
			这种方法调用格式，和 this.$emit("父组件中的方法名称“”);  类似
*/

4. 总结：
   1）state中的数据，不能直接修改，必须通过 mutations
   2）如果组件想要直接从 state 上获取数据，需要 this. $store.state.*** 3）如果组件想要修改数据，必须通过 mutations 中的方法，需要通过 this.$store.commit(‘方法的名称’，唯一的参数);
   4）如果 store 中 state 上的数据，在对外提供的时候，需要做一层包装，需要使用 getters ，使用 this.$store.getters.***

   图片详解：
   
   文件结构：