本文共 2202 字，大约阅读时间需要 7 分钟。

vuex store 是响应式的，当vue组件从store中读取状态（state）时，若store中的状态发生更新时，会及时的响应给其他的组件。

store 中的四个核心选项:     state mutation  getters  actions

1）state是用来存放组件之间共享的数据，一般会在组件的计算属性中获取state的数据。

使用：this.$store.state.  ...

2)  在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过提交(commit) 一个 mutation。

在组件里提交： this.$store.commit('change', payload)

mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东西作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象

还有一点需要注意：mutations方法必须是同步方法！ 

　　var myStore =  new Vuex.Store({        state:{            //存放组件之间共享的数据            name:"jjk",            age:18,            num:1        },         mutations:{             //显式的更改state里的数据             change(state,a){              state.num += a;              }         },            }); Vue.component('hello',{        template:"
姓名：{
  {name}} 年龄：{
  {age}} 次数：{
  {num}}
",        computed: {            name(){                return this.$store.state.name            },            age(){                return this.$store.getters.getAge            },            num(){                return this.$store.state.num            }        },        mounted(){            console.log(this)        },        methods: {            changeNum(){                //在组件里提交                // this.num++;                this.$store.commit('change',10)            }        },        data(){            return {                // num:5            }        }    })

3）getters

       getters可以看成是store的计算属性。

       getters下的函数接收state作为第一个参数。getters可以过滤组件中的数据，过滤的数据会存放到$store.getters对象中。

4）actions

actions：类似于mutation ，但是mutations只能处理同步函数，而actions则是可以处理任何的异步操作 

actions和mutations的区别：

   1.Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。

　2.Action 可以包含任意异步操作。

this.$store.dispatch('add', 5);

执行时会触发actions里面的方法，和commit的用法相同。

action的大致用法：

1. 在actions选项里添加异步函数并提交到对应的函数（在mutation选项里）中 

 context.commit('changeAsync',value);

actions:{   add:function(context,value){      setTimeout(function(){           context.commit('changeAsync',value);      },1000)                    }}

2. 在组件里：将dispatch“指向”actions选项里的函数

changeNumAnsyc:function(){    this.$store.dispatch('add', 5); }

3.　在mutations选项里，要有对应的函数 

changeAsync:function(state,a){    console.log(state.num +=a);}

转载地址：http://ycyws.baihongyu.com/