vuex有五个核心概念：
state, getters, mutations, actions, modules。
1.state：vuex的基本数据，用来存储变量
// state存储基本数据 state: { userId: '', }
我们可以通过Vue的Computed获得Vuex的state
// An highlighted block const store = new Vuex.Store({ state: { count:0 } }) const app = new Vue({ //.. store, computed: { count: function(){ return this.$store.state.count } }, //.. })
mapState辅助函数
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。
// 映射计算属性 computed: mapState([ // 映射 this.count 为 store.state.count 'count' ])
2. geeter：从基本数据(state)派生的数据，相当于state的计算属性,具有返回值的方法
// getter getter: { userIdDouble: function(state){ return state.userId * 2 }
在vue中使用 this.$store.getters.userIdDouble
与state一样，我们也可以通过Vue的Computed获得Vuex的getters。
getters接收state作为其第一个参数，接受其他 getters 作为第二个参数，如不需要，第二个参数可以省略如下例子：
const store = new Vuex.Store({ state: { count:0 }， getters: { // 单个参数 countDouble: function(state){ return state.count * 2 }, // 两个参数 countDoubleAndDouble: function(state, getters) { return getters.countDouble * 2 } } })
mapGetters 辅助函数
与state一样，我们也可以通过Vue的Computed获得Vuex的getters
const app = new Vue({ //.. store, computed: { count: function(){ return this.$store.state.count }, countDouble: function(){ return this.$store.getters.countDouble }, countDoubleAndDouble: function(){ return this.$store.getters.countDoubleAndDouble } }, //.. })
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。提交mutation是更改Vuex中的store中的状态的唯一方法。
mutation必须是同步的，如果要异步需要使用action。
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。（提交荷载在大多数情况下应该是一个对象）,提交荷载也可以省略的
// mutations mutations: { SET_USER: (state, userId) => { state.userId = userId }, },
commit：同步操作，写法： this.s t o r e . c o m m i t ( ‘ m u t a t i o n s 方 法 名 ’ , 值 ) t h i s . store.commit(‘mutations方法名’,值) this.store.commit(‘mutations方法名’,值)this.store.commit(‘SET_USER’,‘123456’)
使用mapMutations–代替 $store.commit()- 传参的时候直接在行内写参数就可以了-
mapMutations 辅助函数
与其他辅助函数类似，你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
// import { mapMutations } from 'vuex' export default { //.. methods: { ...mapMutations([ 'increment' // 映射 this.increment() 为 this.$store.commit('increment') ]), ...mapMutations({ add: 'increment' // 映射 this.add() 为 this.$store.commit('increment') }) } }
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。
// actions actions: { // {} 是es6中解构，把对象解构成属性 login({ commit }, value) { commit('SET_USER', value) // commit('SET_TOKEN', value2) }, }
dispatch：异步操作，写法： this.$store.dispatch(‘mutations方法名’,值)
mapActions辅助函数
你在组件中使用 this.$store.dispatch(‘xxx’) 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）:
// An highlighted block import { mapActions } from 'vuex' export default { //.. methods: { ...mapActions([ 'incrementN' //映射 this.incrementN() 为 this.$store.dispatch('incrementN') ]), ...mapActions({ add: 'incrementN' //映射 this.add() 为 this.$store.dispatch('incrementN') }) } }
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
简单来说就是可以把以上的 state、mutation、action、getters 整合成一个user.js,然后放到store.js里面
