一、安装

cnpm i vuex --save-dev

二、引入（main.js）

import store from './store'new Vue({el: '#app',store,//注册components: { App },template: '<App/>'
})

三、vuex配置 src > store > index.js（src下创建store目录，目录中创建index.js）

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)
let state = {box1: '0',box2: '1'
}
let getters = {getbox1(state){return state.box1},getbox2(state){return state.box2}
}
let mutations = {setBox1(state, str){state.box1 += str}, setBox2(state, str){state.box2 += str}
}
let actions = {acBox1(context, str){// 调用mutations的setBox1方法，并把接收到的str参数传入context.commit('setBox1', str)},acBox2(context, str){context.commit('setBox2', str)}
}
let store = new Vuex.Store({state, getters, mutations, actions
})
export default store; // 导出配置项

四、组件中使用

this.$store.state.box1  // 获取state变量
this.$store.getters.getbox1  // 获取getter变量
this.$store.dispatch('acBox1', '1')  // 调用actions的方法，并传入参数1
this.$store.commit('setBox1', '1')  // 调用mutations的方法，并传入参数1