vuex的用法总结

• 什么是vuex:专门为Vue设计的一种状态管理模式，采用集中式存储管理应用的所有组件的状态，方便非父子的组件之间的通信，利用的是其state中存储的数据。
• 为什么需要有vuex:因为组件之间的通信很复杂，由于传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致代码无法维护。所以我们需要把组件的共享状态抽取出来，以一个全局单例模式管理。在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。
• Vuex的核心概念有哪些：vuex五大核心属性：state，getter，mutation，action，module

1. state（对象）：vuex中的数据源，需要保存的数据就放在这里，可以在页面通过 this.$store.state来获取我们定义的数据，完后再具体的调用state的属性值； 
2. getters（对象）：是获取state中的没数据，相当于Vue中的计算属性computed属性（将数据的计算结结果值缓存起来，只有当数据的值发生改变才会重新计算，这样的话不是每次都执行，可以提高性能），getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果。（但是不是必须是表达式值哦，实时的监听state中的数据变化，并且更新）
3. mutation（对象）：每个mutation对象都有字符串类型（type）与回调函数，在回调函数内进行状态修改，回调函数的第一个参数为state。是修改state数据的唯一方法，里面必须是同步方法，这个对象里面存放改变state的方法，完后调用方式有两种：1、$.store.commit("mutation里面的函数名"，函数的参数)，2、this.$store.commit({type: 'changeMainOption', anyName: 1})注意：mutation必须是同步函数，mutation第二个参数在载荷风格时为commit的第二个参数，对象风格时为commit的对象参数
4. action（对象）：用来触发mutation中的函数，可以包含任意的异步操作，可以给修改后的mutation中的函数绑定一个回调函数来实现依赖其结果的异步函数，因为mutation中只可以是同步函数，所以为们要用action来实现mutation的异步函数，当然action也可以方同步函数，所以vuex提倡用action去触发mutation中的函数，action对象中有一个函数，该函数一定要包含一个context对象，该对象拥有和store一样的属性和方法，所以context.commit（"mutation 函数名"）来触发mutation函数，还可以实现异步很美的~，调用方式也有两种：1、this.$store.dispatch(''mutation函数名", {val: 传给mutation函数的值})2、this.$store.dispatch({type: ''toChangeMainOption", val: 1})注意：想用异步一定要用action，用了action一定要用mutation
5. module：模块化管理，是对不同功能的全局化state数据的管理，所以要在store目录下面新建一个modules文件夹，这个文件是要输出store的要管理的数据比如state等对象

• vuex的工作流程图：
• 
• Vuex的安装过程：

1. 需要在vue-cli项目中安装 vuex :npm install vuex --save
2. 在src目录中创建一个store文件夹，并且在里面新建一个index.js（入口文件）文件
3. 在index文件中导入vuex 并使用，如下所示
4. 并且调用vue.use()初始化一下

5. import Vue from 'vue';
   import Vuex from 'vuex';
   Vue.use(Vuex);
   const store = new Vuex.Store();
    
   export default store;

6. 在main.js中导入store/index.js并且将store放到Vue实例中就可以啦，此时就可以利用this.$store.属性名

• 为什么只能用mutation修改state呢且为同步函数呢：因为我们想要更明确地追踪到状态的变化，同步函数是为了debug
• 辅助函数：辅助函数主要是为了使我们的代码更简洁，使得组件调用store调用更加简洁，通过...mapActions等映射函数将store的四个属性映射到Vue对象中直接通过this调用就可以（state映射到computed中，mutation和action映射到方法中）
• 详细学习请关注Vue文档：https://vuex.vuejs.org/zh/guide/actions.html