1.Vuex 是什么？

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

 个人理解：管理应用的所有组件的状态，我们可以理解为在所有组件中都能用到的一个变量，而且这个变量状态要在发生变化后保持一致。

2.使用Vuex基础

 1、安装依赖命令：npm install vuex --save   可以简写为： npm i vuex -S

 2、引入和使用

　　import Vue from ‘vue‘

　　import Vuex from ‘vuex‘

　　Vue.use(Vuex)

3.具体使用

 1、创建一个 store，里面有一个主文件index.js。仅需要提供一个初始 state 对象和一些 mutation

　如文档所说这个应用包含以下几个部分：

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

　食用前请先引入如2-2

　export default new Vuex.Store({

　　state: {

　　　　count: 0
　　},
　　mutations: {
　　　　increment: state => state.count++,
　　　　decrement: state => state.count--
　　}
　})

 2.在main.js中引入这个store的indexjs

　　import store from ‘./store/index‘

　　new Vue({
　　　　el: ‘#app‘,
　　　　router,
　　　　store,   //将store挂载到vue上,通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store访问到
　　　　template: ‘<App/>‘,
　　　　components: { App }
　　})

 3.在组件中调用

　　<div id="app">
　　　　<p>{{ count }}</p>
　　　　<p>
　　　　　　<button @click="increment">+</button>
　　　　　　<button @click="decrement">-</button>
　　　　</p>
　　</div>

　　new Vue({
　　　　el: ‘#app‘,
　　　　computed: {
　　　　　　count () {
　　　　　　　　return this.$store.state.count
　　　　　　}
　　　　},
　　　　methods: {
　　　　　　increment () {
　　　　　　　　this.$store.commit(‘increment‘)
　　　　　　},
　　　　　　decrement () {
　　　　　　　　this.$store.commit(‘decrement‘)
　　　　　　}
　　　　}
　　})

 4.最简单的对vuex中的count进行加减就已经实现了，那么问题来了，竟然使用state和mutation就能实现，那action和getter这些到底有什么用呢？

4.分析一波

　　1.state:里面是我们的数据源，也就是我们使用的变量

　　2.mutations:则是我们的操作,也就是修改状态的操作

　　@state:组件的数据展示方法

　　　　1、计算属性中computed:

　　　　computed:{

　　　　　　count () {
　　　　　　　　return this.$store.state.count
　　　　　　}

　　　　}

　　　　2、计算属性中computed,mapState 辅助函数

　　　　import {mapState} from ‘vuex‘;

　　　　computed:{

　　　　　　// 使用对象展开运算符将此对象混入到外部对象中

　　　　　　...mapState({

　　　　　　　　count:state=>state.count

　　　　　　})

　　　　}

　　　　3、计算属性中computed,mapState 辅助函数

　　　　import {mapState} from ‘vuex‘;

　　　　computed:{
　　　　　　...mapState(["count"])
　　　　}

未完待续。。。。。

　　@mutations:修改状态的操作,主要是通过--this.$store.commit(‘decrement‘)

　　　　@1.<button @click="increment">+</button>  

　　　　@2.increment () {
　　　　　　this.$store.commit(‘increment‘)
　　　　}

　　　　@3.mutations: {
　　　　　　increment: state => state.count++,
　　　　　　decrement: state => state.count--
　　　　}

　当然this.$store.commit也可以传额外的参数比如说--this.$store.commit(‘increment‘ ,10 )

   ---文档中说即 mutation 的 载荷（payload），但在大多数情况下，载荷应该是一个对象，，这样可以包含多个字段并且记录的 mutation 会更易读　

　　　　@1.<button @click="increment">+</button>  

　　　　@2.increment () {
　　　　　　this.$store.commit(‘increment‘,m)
　　　　}

　　　　@3.mutations: {
　　　　　　increment: (state,m) => state.count+=m,
　　　　　　decrement: state => state.count--
　　　　}

　在组件中提交 Mutation---什么意思呢？　

　　　文档上说：1.使用 this.$store.commit(‘xxx‘) 提交 mutation；

　　　　　　　　2.使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用

　　　上面例子使用的是this.$store.commit(‘xxx‘) 提交 mutation，现在我们使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用

　　　　@1.<button @click="increment">+</button>  

 　　　  @2.mutations: {

　　　　　　increment: (state,m) => state.count+=m,
　　　　　　decrement: state => state.count--
　　　　}

　　　　@3.import { mapMutations } from ‘vuex‘　

　　　　methods:{
　　　　　　...mapMutations(
　　　　　　　　[ ‘increment‘,‘decrement‘ ]
　　　　　　)

　　　　}

　　这样看起来是不是感觉更好了呢。。。　

　5.使用常量替代 Mutation 事件类型---mutation.type.js

　　// mutation-types.js
　　export const SOME_MUTATION = ‘SOME_MUTATION‘

　　// store.js
　　import Vuex from ‘vuex‘
　　import { SOME_MUTATION } from ‘./mutation-types‘

　　const store = new Vuex.Store({
  　　state: { ... },
  　　mutations: {
    　　// 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    　　[SOME_MUTATION] (state) {
      　　// mutate state
   　　}
  　　}
　　})

　　Mutation 必须是同步函数, mutation 中混合异步调用会导致你的程序很难调试。例如，当你能调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念,为了处理异步操作，让我们来看一看 Action。　

　6.Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

　　　　actions: {　　

　　　　　　addAction(context){
　　　　　　　　context.commit(‘add‘,10)
　　　　　　},

　　　　//ES2015 的 参数解构 来简化代码
　　　　　　reduceAction({commit}){
　　　　　　　　commit(‘reduce‘)
　　　　　　}

　　　　 }　

　　1.分发 Action

　　　　1.Action 通过 store.dispatch 方法触发：

　　　　　　store.dispatch(‘increment‘)

　　　 2.Actions 支持同样的载荷方式和对象方式进行分发：
　　　　
　　　　// 以载荷形式分发 store.dispatch(‘incrementAsync‘, { amount: 10 }) 
　　　　// 以对象形式分发 store.dispatch({ type: ‘incrementAsync‘, amount: 10 })　

　　2.在组件中分发 Action

　　　　1.使用 this.$store.dispatch(‘xxx‘) 分发 action；

　　　　2.使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

　　　　@1.<button @click="addAction">+</button>  

　　　　@2.import { mapActions } from ‘vuex‘　　　

　　　　methods:{
　　　　　　...mapActions(
　　　　　　　　[ ‘addAction‘,‘reduceAction‘ ]
　　　　　　)

　　　　}　　　

　　　　@3.actions:{
　　　　　　addAction(context){
　　　　　　　　context.commit(‘add‘)
　　　　　　},
　　　　　　reduceAction({commit}){
　　　　　　　　commit(‘reduce‘)
　　　　　　}
　　　　}　

　　3.组合 Action----这部分本人没有理解透，就不误人子弟了

　　　想了解请看文档 https://vuex.vuejs.org/zh-cn/actions.html

　7.Getter----可以认为是 store 的计算属性。

　　　解释：就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。　

　　　　@1.<button @click="addAction">+</button>  

　　　　@2.import { mapGetters } from ‘vuex‘　　　

　　　　 computed: {

　　　　　　// 使用对象展开运算符将 getter 混入 computed 对象中

　　　　　　...mapGetters(["count"])

　　　　}

　　　　@3.var getters={
　　　　　　count:function(state){
　　　　　　　　return (state.count<10 && state.count>0)?‘0‘+state.count:state.count;
　　　　　　}
　　　　}

　8.Module

　　　1.不多说，上代码

　　　const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } }

　　　const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } }

　　　const store = new Vuex.Store({

　　　　　　 modules: { a: moduleA, b: moduleB }

　　　 })

　　　store.state.a // -> moduleA 的状态

　   　store.state.b // -> moduleB 的状态

　　　2.本来是 this.$store.state.count =》this.$store.state.a.count

　　　　computed:{
　　　　　　// ...mapState(["count"]),
　　　　　　count () {
　　　　　　　　return this.$store.state.a.count
　　　　　　},
　　　　　　// ...mapState({
　　　　　　　　// count:state=>state.a.count //理解为传入state对象，修改state.count属性
　　　　　　// })
　　　　}