我是一个刚刚学习vuex的小白，这两天主要连着官网和资料还有项目里的vuex在学习，在这里记下自己学习的一些总结，一方面是我自己的学习提升，也希望对你有所帮助。首先我们来理解下为什么要用vuex？我们先来捋下父子组件和非父子组件之间的通信。父子组件：先来定义下有parent.vue 和 childOne.vue 和 childTwo.vue1.属性传值//parent.vue里可以写（写的都是部分代码）<child-one :params=“params”></child-one>//childOne.vue里用props接收//只有开发原型系统能接收props:[‘params’], //稍微好点的写法（我在项目里就这样写的）props:{ params: Object}//更好的写法props:{ params: { type: Object, required: true, // 必填的字符串 //对象或数组默认值必须从一个工厂函数获取 default: function () { return { message: ‘hello’ } } //自定义校验这个值必须匹配下列字符串中的一个 validator: function(value){ return[ ’name’ ‘sex’ ’’ … ’error’ ].indexOf(value) !== -1 } }}//这里扩散了一点props越看越多 要详细看的请去看官网//https://cn.vuejs.org/v2/guide/components-props.html2.$refs 不止传参哦//parent.vue 里面<template> <child-one ref=“child1”></child-one><script> this.$child1.clickChildOne() //调用child1的clickChildOne方法 传参有时候觉得超方便 设置子组件的样式也超方便 安利,哈哈3.$parent.$parent.$parent（请你一定要找对层级 ‘_’）//主要是子组件给父级组件传参数或者调用父组件的方法childOne.vue里<script> methods: { //调用父级的方法getParentDeta() clickHandleDeta() { //几个parent通过自己的层级找吧.. this.$parent.$parent.$parent.getParentDeta() } } 非父子组件传值1.通过共同的父级来一级一级的传上去然后再传下来（就不写代码了）2.集中式的事件中间件就是Bus，来处理 这里详细说下//app.jsvar createBus = { install(Vue,options) { Vue.prototype.$bus = vue }}Vue.use(createBus)//childOne.vue里<script>methods: { getDeta() { this.$bus.$emit(’todoSth’, params); //emit触发 params是传递的参数 }}//childTwo.vue里<script>mounted: { this.$bus.$on(’todoSth’, params); //on接收}vuex 它就是可以用在大中型项目（当然你想用那个地方都能用）用全局单例模式管理来管理多个组件公共的数据或者方法。//一个貌似四肢健全的vuex（有state、getters、actions、mutations、module）const store = new Vuex.Store({ state: { count: 0 }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) } } mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit(‘increment’) } }})下面我们按顺序一一来介绍和学习state 用来数据共享数据存储mutation 用来注册改变数据状态getters 用来对共享数据进行过滤操作action 解决异步改变共享数据mutations1.更改 Vuex 的 store 中的状态的唯一方法是提交 mutation2.Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。而调用或者说唤醒mutations 就必须用store.commitstore.commit(‘increment’)你可以向 store.commit 传入额外的参数,字段或者对象都行的。在大多数情况下，参数应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读。store.commit(‘increment’, { amount: 10})但是mutations 是同步执行的，就是说mutations 中的方法是不分组件的 , 假如你在 hello1.js 文件中的定义了add方法 , 在其他文件中的一个add方法 , 那么$store.commit(‘add’) 会执行所有的 add 方法!这个时候就是actions出现的时候了。actions多个state 的操作,使用 mutations 会来触发会比较好维护 , 那么需要执行多个 mutations 就需要用 action 了。const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit(‘increment’) } }})Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，就是说context.commit可以提交一个 mutation，可以调用context.state和context.getters来获取state和getters。使用 $store.dispatch(‘switch_dialog’)来触发action中的increment方法还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：actions: { incrementAsync ({ commit }) { setTimeout(() => { commit(‘increment’) }, 1000) }}Actions 参数也可以是对象啥的// 以载荷形式分发store.dispatch(‘incrementAsync’, { amount: 10})// 以对象形式分发store.dispatch({ type: ‘incrementAsync’, amount: 10})很多时候 , $store.state.dialog.show 、$store.dispatch(‘switch_dialog’) 这种写法又长又臭 , 很不方便 。使用 mapState、mapGetters、mapActions 就不会这么复杂了。<template> <el-dialog>{{count}}</el-dialog></template><script>import {mapState} from ‘vuex’;export default { computed:{ //这里的三点叫做 : 扩展运算符 …mapState({ count:state => state.dialog.count }), }}</script>相当于<template> <el-dialog>{{count}}</el-dialog></template><script>import {mapState} from ‘vuex’;export default { computed:{ count(){ return this.$store.state.dialog.count; } }}</script>mapGetters、mapActions 和 mapState类似,mapGetters 一般也写在 computed 中 ,mapActions 一般写在 methods 中。