初识vuex

vuex2.0 基本使用--- mutation 和 action

http://www.cnblogs.com/SamWeb/p/6543931.html（借鉴处）

如果是组件与组件之间的通信非常复杂，不光是父子组件，还有兄弟组件，那就需要用到状态管理，vuex

1, mutation

The only way to actually change state in a Vuex store is by committing a mutation, 在vue 中，只有mutation 才能改变state.  mutation 类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字，action去comit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字，commit mutation 之后， 要做什么事情，那就需要给它指定一个处理函数， 类型(名字) + 处理函数就构成了mutation. 现在store.js添加mutation.

需要一个状态管理，按照一定的机制把你的变量变换成vue内部的模型。这个东西就是vuex。因为约定比较多，略显复杂点，但是耐心看一下还是很容易接受的。它主要分四个部分，state,getters,mutations,actions。先定义一个user.js如下：

而getters顾名思义就是获取接口，mutations(突变)这个词有点唬人，其实就是setters嘛。里面的方法自带state参数。而actions就是mutations的异步方法。

state就是我们放共享变量的地方。比如下面的userInfo.

import Vue from 'vue';

import Vuex from'vuex';

Vue.use(Vuex);

const userStore=newVuex.Store({

state:{

userInfo:{

userName:""

}

},

getters:{

getUserInfo(state){

returnstate.userInfo;

}

},

mutations:{

setUserInfo(state,userInfo){

state.userInfo=userInfo;

}

},

actions:{

setUserInfo({commit}){

commit('setUserInfo');

}

}

})

exportdefaultuserStore;

自己初期项目中的实例。