1、npm install vuex //安装至生产环境
2、在src中新建vuex文件夹，添加store.js文件，在store.js文件中
a、引入vue，vuex:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
b、声明全局共享状态及数据：
const state = {
num：1
}
c、声明用于修改全局state对象属性的mutation对象，并添加方法：
const mutations = {
add(state,n) {//第一个参数为固定参数指向全局state对象，第二个参数为自定义参数
return state.num += n
},
reduce(state) {
return state.num --
}
}
d、声明用于监听state对象内属性变化的并作出修改的getters对象
const getters = {
num(state){//每当state中的num属性变化时都会调用该num方法
return state.num += 3
}
}
e、声明异步修改状态的actions，actions可以调用mutations内的方法，作用与mutations类似，只不过是异步的去修改state，不阻塞js执行流
const actions = {
addAction(context){//context是整个store对象
context.commit('add',10) //直接调用mutation中的add方法
}，
reduceAction({commit}){//可以直接使用commit作为参数，注意{}
commit('reduce')
}
}
3、在store.js中对外开放以上定义的对象
export default new Vuex.Store({
state,mutations,getters,actions
})
4、在需要使用的组件文件中引入vuex，在此组件中模板中可以通过$store拿到store实例，js用this.$store
import store from '@/vuex/store'
import { mapState,mapMutation,mapGetters,mapActions }
export default {
data(){
return {}
},
computed:{
...mapState(['num']),//直接引入store中的num在此组件中可以直接使用
...mapGetters(['num']) //直接引入store中的num在此组件中可以直接使用，每当num有变化时都会改变
}，
methods:{
...mapMutations(['add',reduce])，//在数组中引入mutations内你所需的方法，在此组件中你就可以直接调用了
...mapActions(['addAction']),//同上
}
}
5、模块化
const moduleA = {
state:{},
mutaions:{}
}
const moduleB = {
state:{},
mutaions:{}
}
export default new Vuex.store({
modules:{a:moduleA,b:moduleB}
})