一、概览

1、Vuex是什么

• 专为Vue.js应用程序开发的状态管理模式（状态即数据，即数据管理）
• 采用集中式存储管理应用的所有组件的状态
• 以相应的规则保证状态以一种可预测的方式发生变化
  2、状态
• 组件内部状态：仅在一个组件内使用的状态( 即data字段里的数据，不能共享，只在本组件使用 )
• 应用级别状态：多个组件共用的状态（将这个状态放入vuex中进行管理）
  3、什么情况下使用Vuex
• 多个视图（组件）依赖同一状态
• 来自不同视图（组件）的行为需要变更同一状态

二、Vuex核心概念

1、store：类似容器，包含应用的大部分状态

• 一个页面只能有一个容器
• 状态存储是响应式的
• 不能直接改变store中的状态，唯一途径显示地提交mutations
• 在actions里面，也不能直接更改state里面的状态值，必须先定义一个mutations，然后在actions里面commit这个mutations，从而来更改state的状态值；如果要再次请求异步，那么就是dispatch一个actions
  2、State：包含所有应用级别状态的对象
  3、Getters：在组件内部获取store中状态的函数，类似组件的计算属性computed
  4、Mutations：唯一修改状态的事件回调函数，默认是同步的，如果要异步就使用Actions
  5、Actions：包含异步操作、提交mutations改变状态
  6、Modules：将store分割成不同的模块

三、使用Vuex

1、安装Vuex模块npm install vuex --save2、作为插件使用import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)3、定义容器let store = new Vuex.Store({    state:{        count:100    },    mutations:{  //对象，里面是各种更改state状态值的函数，同步立即更改状态        add( state,payload ){  //参数state就是上面的state，payload是要传递的值            state.count+=payload.n;        }    },      actions:{  //异步更改状态，可以是ajax请求成功之后改变状态，这里用定时器模拟，1秒钟之后提交mutations改变状态        //异步的更改状态是直接在index.js里面的actions里面定义action然后commit的(附带参数)，而不是在组件内提交，注意区别，异步是在组件内dispatch这个actions(actions里面已经包含了mutations)，同步是在组件内commit这个mutations(附带参数)        //异步也可以在index.js里面直接dispatch这个actions(附带参数)，在第一个ajax里面接着请求第二个ajax        addAction( context ){  //ajax1            setTimeout(function(){                context.commit('add',{n:200});  //这里用的mutations还是上面定义的add                context.dispatch('textAction',{test:'测试'})  //触发ajax2            },1000)        }        textAction( context,obj ){  //ajax2            console.log(obj)        }        //利用es6解构赋值改写上面的代码，因为context对象下面有commit和dispatch方法        addAction( {commit,dispatch} ){            setTimeout(function(){                commit('add',{n:200});   //直接可以获取到commit方法，不用是context.commit                dispatch('textAction',{test:'测试'})             },1000)        }        textAction( context,obj ){  //ajax2            console.log(obj)        }    },//异步更改状态,一段时间之后再改变状态，只要是异步的改变都写在actions里面    getters:{ //类似计算属性，对状态做进一步的处理        filterCount(state){            return state.count>=120?120:state.count++;        }    }  })export default store4、注入根实例import store from './store'new Vue({    store})

5、在state里面定义的是状态，如果在组件内部要使用这个状态，那么一般在组件内部通过计算属性来得到它

{
   {count}}
{
   {count2}}
computed:{    count(){        return this.$store.state.count    },    count2(){        return this.$store.getters.filterCount  //被getters进一步处理过的状态    }},methods:{    addHandle(){  //要动态的改变状态，就需要显示的提交一个mutations —> add        //同步，写法一        this.$store.commit('add',{n:10})        //同步，写法二        this.$store.commit({            type:'add',            n:5        })        //异步，写法        this.$store.dispatch('addAction')    }}

6、context是一个对象，不是state实例

7、使用辅助函数

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'//这是改写state和getterscomputed:{    num(){        return this.$store.state.count    },    num2(){        return this.$store.getters.filterNum    }}computed:mapState({    num:state => state.count    num:'count'    num(state){        return state.count+100    }    count:'count'  //此时渲染的是count，不是num})computed:{    abc(){        return 123    },    ...mapGetters({        num2:'filterCount'  //如果key值（即要渲染到页面的变量值）和vuex里面定义的是一样的，那么就可以是下面那种写法    }),    ...mapState(['count'])  //count:count     count是要渲染到页面   state:{count:100}，state里面定义的状态名也是count}//这是改写actions和mutationsmethods:{    add(){  //异步actions        this.$store.dispatch('addAction')    }},reduce(){  //普通mutations，参数可以直接跟在对象里    this.$store.commit({        type:'reduceMutation',        n:10    })}methods:{    ...mapActions({        add:'addAction'  //add是页面点击函数，addAction是vuex里面定义的action    })    ...mapMutations({  //这种方法要传参，只能是在调用的时候传进去        reduce:'reduceMutation'    })}  参数在这里传，和普通写法不同

四、案例

**index.js**let store = new Vuex.Store({    state:{  //对象，应用所需要的状态数据都放在这里面        count:100    },    mutations:{  //对象，显示的同步提交mutations，状态是点击之后立即改变        addIncrement(state,payload){  //这里是自定义addIncrement事件            state.count+ = payload.n        }    },    actions:{  //异步的改变状态，比如发送请求成功之后才改变状态，不是即时的改变        addAction( context ){  //这里新加自定义事件addAction            setTimeout( ()=>{  /模拟异步操作            //改变状态，提交mutations，仍然是上面mutations里面定义的事件addIncrement                context.commit('addIncrement',{n:15})                context.dispatch('textAction',{test:'测试'})  //这里执行该异步操作            },1000 )        },        textAction(context,obj){  //定义第二个异步操作            console.log(obj)  //{test:'测试'}        },        getListAction( context ){  //这里定义了异步接口action，在子组件created里面调用            axios.get('url')            .then( (data)=>{                console.log(data);  //得到了接口数据            } )        }    },    getters:{  //对store里面的数值进行逻辑操作        filterState(state){            return state.count>=120?120:state.count        }    }})export default store**increment组件：**
    //上面是同步操作数据，使用mutations，如果要异步操作数据，就用到Actions，注意，不管是同步还是异步操作，改变数据前都得先提交mutations//向后端发送ajax请求就放在Actions里面。在methods里面创建方法，通过axios获取数据，然后更新到store里面定义的变量，这一系列操作都在index.js文件里面完成

• 如果要对store里面的数值进行逻辑判断（数据过滤、数据的加减乘除），那么就用到getters，用法类似于计算属性computed，getters可以看做是Vuex的计算属性

• 在Store仓库里，state就是用来存放数据，在Vue里面若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。我们可以认为，【getters】是store的计算属性。因为getters是对数据进行逻辑运算，而不是新添加的方法或功能，仅仅是是数据的逻辑运算，所以要始终返回一个新值，可以先在getters下面的方法里面定义一个新值变量，经过计算，然后return出这个新变量

• getters比较死板，如果你的百度钱包只有在金额为100才能提现，那么你在写提现页面，它是早已固定好的，而Mutation不一样，当你点击百度钱包提现，你哪怕是一元，它只要你点击了便可以提现，而且getters它是不需要什么点击，它就存在，只要你写了，这是什么意思，就是说假设你百度钱包为0，你存在了getter它就有100元，而你如果写许多百度经验，百度再次发红包0.5元时它就是100+0.5+100

五、Vuex辅助函数

使用这些辅助函数，首先需要引入vuex，这些都是vuex下面的方法，使用解构赋值import { mapState } from 'vuex'mapStatemapGettersmapMutationsmapActions改写上面的代码：

Increment.vue组件
    index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)let store = new Vuex.Store({    state:{        count:100    },    mutations:{        addHandle(state,payload){  //payload是参数            state.count+=payload.n;        },        reduceAction(state,payload){            state.count-=payload.n        }    },    actions:{        addAction(context){            setTimeout(()=>{                context.commit('addHandle',{n:15})  //异步每次加15            },1000)        }    },    getters:{        filterNum(state){            return state.count>=102?102:state.count        }    }})export default store

六、在vue-cli里面使用Vuex

1、npm install vuex --save2、在src目录下面新建store文件夹，里面新建index.js3、store/index.js代码：

import Vue from 'vue'import Vuex from 'vuex'import axios from 'axios'Vue.use(Vuex)let store = new Vuex.Store({    state:{        shopCarData:[]  //购物车的数据默认数据格式是数组，使用Vuex对这个数组进行操作    },    mutations:{        addShopCarData(state,data){            //do something        }    },    getters:{    }})export default store

4、main.js代码

import store from './store'new Vue({    el:'#app',    router,    store,    template:'
    ',    components:{        App    }})

七、vuex使用心得