前沿：总结一下vuex中state，getters,mutations,actions的用法（主推map辅助函数）
介绍：vuex是vue专门为了解决多组件共享数据借鉴Flux、Redux 和 The Elm Architecture
而创造的全局单例模式管理状态库，配合devtools extension可零配置的 time-travel 调试、状态快照导入导出等高级调试功能

vuex工作模式
vuex的核心：本质就是储存数据的‘仓库’（Store）,通过new创建出来，与普通全局对象不同的是，它的状态存储是响应式，还有就是不能直接改变 store 中的状态，唯一途径就是显式地提交 (commit)

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

使用前提，必须先挂载在vue实例上或直接将整个创建出来的store导入

//挂载后全局可用，this.$store.state.count
import store from './store'
new Vue({
  el: '#app',
  store
})
//直接使用，store.state.count
import store from './store'
created(){
  console.log("store.state.count",store.state.count)
}

state（就是定义全局数据）

（1）在store中

const state = {
   count: 1
}

( 2 )在页面中使用

方法①直接在html中使用

<p>{{ this.$store.state.count }}</p>

方法②利用computed获取在使用

<p>{{ count }}</p>
computed: {
  count() {
     return this.$store.state.count
  }
}

方法③利用辅助函数mapState获取在使用

<p>{{ count }}</p>
import { mapState } from 'vuex'
computed: {
  ...mapState([
       'count'   // 映射 this.count 为 this.$store.state.count
  ])
}

方法④利用辅助函数mapState获取在使用（跟③差不多）

<p>{{ count }}</p>
import { mapState } from 'vuex'
computed: mapState([ 'count'])

getters(store 的计算属性，将state中的数据装饰到页面，但不会改变原来state的数据)

( 1 )在store中

const getters = {
  count: function( state )  {
    return state.count += 100
  }
}

( 2 )在页面中使用

方法①利用computed获取

<p>{{ count }}</p>
computed: {
   count() {
      return this.$store.getters.count
  }
}

方法②利用辅助函数mapGetter获取

<p>{{ count }}</p>
import { mapGetters } from 'vuex
computed: {
   ...mapGetters([
        'count'   //把 `this.count ` 映射为 `this.$store.getters.count `
   ])
}

mutations（提交或者说改变state中的数据，用commit）

( 1 )在store中

const mutations={
    add(state){
        state.count++;
    }
}

( 2 )在页面中使用

方法①在html中使用直接commit

<button @click="$store.commit('add')">+</button>

方法②利用辅助函数mapMutations 获取

<button @click="add">+</button>
import { mapMutations } from 'vuex
methods: {
    ...mapMutations([  
        'add',  //将 `this.add()` 映射为 `this.$store.commit('add')`
    ]),
}

actions（作用其实是调用mutations，因为数据来源在后端必定是异步，异步操作全局状态）

( 1 )在store中

方法①context（上下文对象，这里你可以理解称store本身）

const actions ={
    addAction(context){
        context.commit('add',10)
    }
}

方法②{ commit }（直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了）

const actions ={
    addAction({commit}){
        commit('add')
    }
}

( 2 )在页面中使用（dispatch）

方法①直接在html中使用

<button @click="$store.dispatch('addAction')">+</button>

方法②利用辅助函数mapMutations 获取

<button @click="addAction">+</button>
import { mapMutations } from 'vuex
methods:{
    ...mapActions([
       'addAction',    //将 `this.addAction()` 映射为 `this.$store.dispatch('addAction')`
    ])
},

module

( 1 )在store中
将某个功能或页面的所有属性放到一个模块

const moduleA={
    state,mutations,getters,actions
}

export default new Vuex.Store({
    modules:{a:moduleA}
})

( 2 )在页面中使用

方法①直接computed拿

computed:{
    count(){
        return this.$store.state.a.count;
    }
},

方法②

小结：
1.vuex是什么玩意，其实它就是个壳，我们要的是里面的肉Store。
2.new 出来的store里面就有state（数据），getters（计算），mutations（同步改数据），actions（异步改数据）。
3.只要全局挂载了store，就可以在各个页面中去操作store里面的属性。
4.使用辅助函数是最简单最直观 的方法操作store了，但是要理解一下具体表示啥。
5.触发mutations函数直接调用store.commit方法（$store.commit）
6.actons调用mutations函数：context.commit
7.涉及到多组件传值直接用vuex吧，别想那么多，其也没别人说的那么臃肿
8.多个页面都要用到store要分块，好管理

进阶：
1.当有模块嵌套起来，则在每个子模块的getter和actions的参数就是暴露出rootState

const moduleA = {
  // rootState为根状态
  getters: {
    sumWithRootCount (state, getters, rootState) {
      return state.count + rootState.count
    }
  },
  actions: {
    incrementIfOddOnRootSum ({ state, commit, rootState }) { //此时 state, commit, rootState应该是在context对象里面的
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}

参考：官网
参考： vuex免费视频教程