看官方文档看的一脸懵逼，后来看到了一篇比较容易理解的博文，大概写下自己的理解
一、vuex是什么
是基于vue的状态管理模式，一般用于解决大型项目中子组件向父组件传递数据的问题
二、基本概念
1、state
需要使用store的数据存储在state里，并且在组件里通过this.$store.state.xxx访问
import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex);export default new vuex.Store({state:{show:false} })
2、mutations
$store.state.xxx一次只能操作一个state中的数据，如果需要同时操作state中多个数据，就需要使用mutations。
export default {state:{//stateshow:false},mutations:{switch_dialog(state){//这里的state对应着上面这个statestate.show = state.show?false:true;//你还可以在这里执行其他的操作改变state }} }
在组件里，可以通过this.$store.commit('switch_dialog')触发这个事件。官方文档注明，在mutations中的操作必须是同步的，同时mutations是不区分组件的，如果在别的module中存在同名的函数，commit之后会一起触发。
$store.commit()是可以额外传入参数的，提交事件时可以直接传入，也可以选择对象风格
state:{show: false
},
mutations:{switch_dialog(state, n){//载荷state.show = n}
}
//传参的时候可以 this.$store.commit('switch_dialog',true)
//也可以选择对象风格 this.$store.commit({ type: 'switch_dialog' , n: true}) 3、module
如果想区分不同组件的state，可以使用module
import Vue from 'vue' import vuex from 'vuex' import dialog_store from 'dialog_store.js' //引入对应组件的js文件 Vue.use(vuex);export default new vuex.Store({modules: {dialog: dialog_store //上面引入的模块 } })
这样就可以在对应组件的js文件里管理对应的状态了(dialog_store.js)
export default {state:{show:false} }
在组件中可以通过this.$store.state.dialog.show访问它
4、action
多个state操作需要通过mutations，那么如果是多个mutations的操作就需要通过action了，另外官方推荐异步操作要放在action里。
export default {state:{//stateshow:false},mutations:{switch_dialog(state){//这里的state对应着上面这个statestate.show = state.show?false:true;//你还可以在这里执行其他的操作改变state }},actions:{switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法context.commit('switch_dialog');//你还可以在这里触发其他的mutations方法 },} }
在组件里可以通过this.$store.dispatch('switch_dialog')触发事件
5、getters
vuex的getters可以看作是vue中的computed，如果需要对state中某个属性进行额外的运算，可以在getters中进行定义
export default {state:{//stateshow:false},getters:{not_show(state){//这里的state对应着上面这个statereturn !state.show;}},mutations:{switch_dialog(state){//这里的state对应着上面这个statestate.show = state.show?false:true;//你还可以在这里执行其他的操作改变state }},actions:{switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法context.commit('switch_dialog');//你还可以在这里触发其他的mutations方法 },} }
在组件中，我们可以通过this.$store.getters.not_show获得这个状态，getters中的状态不可以直接进行修改，只能获取它的值
6、mapState、mapAction、mapGetters
如果你觉得上面获取状态的写法this.$store.state.xxx过于麻烦，毕竟我们平时获取一个数据只需要写this.xxx，可以选择使用mapState、mapAction、mapGetters，下面引自上面提到的那篇博文
以mapState为例
<template><el-dialog :visible.sync="show"></el-dialog> </template><script> import {mapState} from 'vuex'; export default {computed:{ ...mapState({show:state=>state.dialog.show}),} } </script>
相当于
<template><el-dialog :visible.sync="show"></el-dialog> </template><script> import {mapState} from 'vuex'; export default {computed:{show(){return this.$store.state.dialog.show;}} } </script>
mapGetters、mapActions 和 mapState 类似 ，mapGetters 一般也写在computed中 , mapActions 一般写在 methods 中。
三、安装和使用方法
安装 vuex ：
npm install vuex --save
然后为了方便管理，可以在src/下创建一个store文件夹，创建一个index.js, :
import vuex from 'vuex' Vue.use(vuex); var store = new vuex.Store({ state:{show:false} })
再然后 , 在实例化 Vue对象时加入 store 对象 :
new Vue({el: '#app',router,store,template: '<App/>',components: { App } })
完成到这一步 , 上述例子中的 $store.state.show 就可以使用了。
