import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
let store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showCount (state) { return state.count }
  },
  mutations: {
    add (state, step = 0) {
      state.count++
      state.count += step
    }
  },
  actions: {
    aysAdd (context, step = 0) {
      console.log(context)
      setTimeout(() => {
        console.log(step)
        console.log(context)
        context.commit('add', 1)
      }, 2000)
    }
  }
})
console.log(store)
export default store

如上vuex的封装

例如：

1. 在页面的created里面使用this. s t o r e 触 发 a c t i o n s 的 a y s A d d 请 求 ， 写 法 （ t h i s . store触发actions的aysAdd请求，写法（this. store触发actions的aysAdd请求，写法（this.store.dispatch(‘aysAdd’,‘参数’)）
2. 在actions里声明如代码所示
3. 通过context.commit(‘add’,参数)触发mutations的函数add
4. mutations的add再设置值到state里面
5. 在使用的组件中使用...mapState(['count']),即可无缝使用count