（1）安装vuex
npm install vuex --save（2）配置vuex
根据个人开发习惯，项目中vuex的配置也不相同，不过大体都差不多，也有差别大的地方，比方说官网推荐在actions里写异步操作改变state状态，但是我还是比较喜欢将请求数据等异步操作放在store外面操作，在通过commit去改变状态，具体将会在下面的数据请求模块的封装里提到
废话不多说了，看下面图片
首先创建了一个状态的文件夹，用于管理整个状态；在modules里面分开来写各个模块的状态，如下
/**
* home.js
* 用于home模块的状态管理
*/
import * as types from '../mutation-type' // 引入定义的方法
const home = {
state: {
number: 1
},
mutations: {
[types.SET_NUM](state, num) { // 修改state 可通过mapMutations调用
state.number = num
}
},
actions: {},
getters: { // 定义getters，可以通过mapGetters拓展函数调用
number: state => {
return state.number
}
}
}
export default home // 输出home模块mutation-type定义了一些修改state的方法，如下
在index.js统一输出，如下
import Vue from 'vue'
import Vuex from 'vuex'
import home from './modules/home'
import createLogger from 'vuex/dist/logger'Vue.use(Vuex)
const debug = true
export default new Vuex.Store({
modules: {
home
},
plugins: debug ? [createLogger()] : [] // 是否开启vuex的debug模式
})
这里用到了一个vuex的内置插件，如上图，开启之后状态的每次改变都可以在console里面查看修改信息如下图
这里的index配置好之后就是要在main.js里注册一下
通过以上几步设置，就可以在项目里面使用状态了，这里以home.vue为例，看下面代码
import {mapMutations, mapGetters, mapState} from 'vuex' // 引入map方法
export default {
data () {
return {
num: 0
}
},
methods: {
...mapMutations({ // 调用setNum方法
setNum: 'SET_NUM'
}),
increase() {
this.num++
this.setNum(this.num) // 将this.num转入setNum
}
},
computed: {
// ...mapGetters([ // 通过getters获取state数据
// 'number'
// ]),
...mapState({ // 通过state获取state数据
number: state => state.home.number
})
}
