Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

简单的 Store

目录结构

1
2
3
4
|-src
  -main.js
  -store.js
  -App.vue

store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 数据源（状态对象）
const state = {
	count: 10
}
// 提交动作
const actions = {
  // 提交一个动作 到 mutations
  increment({ commit }) {
    commit('increment') 
  }
}
// 处理数据的变化
const mutations = {
  // 提交的动作如何操作数据
  increment(state) {  
    state.count++
  }
}
// 获取变化后的数据
const getters = {
  // 提交数据
  count(state) {
    return state.count
  }
}
// 导出
export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters
})

main.js

1
2
3
4
5
6
import store from './store'
new Vue({
  // 注册 store
  store
})

App.vue

组件的 html 部分
1
2
3
4
5
6
7
<template>
  <div id="app">
    <h3>welcome vuex-demo</h3>
    <input type="button" value="增加" @click="increment">  
    <div>{{count}}</div>
  </div>
</template>
组件的 js 部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  // 输出数据
  computed: mapGetters([
    'count'
  ]),
  // 获取执行的动作
  methods: mapActions([
    // 映射 this.increment() 为 this.$store.dispatch('increment')
    'increment'  
  ])
}
</script>

这个简单的 store 中把所有的步骤都写在一个js文件里面，不方便维护和管理。

拆分开的独立文件

目录结构

1
2
3
4
5
6
7
8
9
10
|-src
  -main.js
  |-store
    -actions.js         // 提交动作
    -getters.js         // 提交数据到显示
    -index.js           // 入口
    -mutations.js       // 执行操作
    -types.js // 状态类型
    -state.js           // 状态对象
  -App.vue

main.js

1
2
3
4
5
6
import store from './store/index'
new Vue({
  // 注册 store
  store
})

App.vue

组件的 html 部分
1
2
3
4
5
6
7
<template>
  <div id="app">
    <h3>welcome vuex-demo</h3>
    <input type="button" value="增加" @click="increment">  
    <div>{{count}}</div>
  </div>
</template>
组件的 js 部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  // 输出数据
  computed: mapGetters([
    'count'
  ]),
  // 获取执行的动作
  methods: mapActions([
    // 映射 this.increment() 为 this.$store.dispatch('increment')
    'increment'  
  ])
}
</script>

state.js

需要维护和操作的数据

1
2
3
4
// 维护的数据
export default {
    count: 20
}

types.js

定义一个类型文件，用来保存被提交的动作

1
2
// 操作的类型
export const INCREMENT ='INCREMENT';

actions.js

通过 commit 提交一个方法出去到 mutations 中

1
2
3
4
5
6
7
8
// 提交操作方法
import * as types from './mutations-types';
export default {
  increment({ commit }) {
    commit(types.INCREMENT);
  }
}

mutations.js

执行一个动作用来操作 state 中的某个数据

1
2
3
4
5
6
7
8
// 执行的动作
import * as types from './mutations-types';
export default {
  [types.INCREMENT](state) {
    state.count++;
  }
}

getters.js

将改变的数据进行返回出去给更新组件的数据状态

1
2
// 提交数据内容
export const count = state => state.count

index.js

入口文件，将整个store中的内容通过 new Vuex.Store() 导出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 入口文件 导出
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import state from './state';
import actions from './actions';
import mutations from './mutations';
import * as getters from './getters'
export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters
});