Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它集中式存储组件的共享状态，以一个全局的单例模式进行管理，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 的核心是 store（仓库），它相当于一个容器，包含着应用中的大部分状态（state）。Vuex 的存储状态是响应式的，若 store 中的状态发生改变，那么组件中也会得到相应的更新。我们不能直接改变 store 中存储的状态，需要显示地提交（commit）mutation。

引入 Vuex

在 src 目录下创建 store/index.js 文件，并引入 Vuex。

  1. import Vuex from 'vuex'
  3. Vue.use(Vuex)

创建 Vuex.Store 对象

在 store/index.js 文件中创建 Vuex.Store 对象，如下。

  1. export default new Vuex.Store({
  2.     state: {
  3.         message: "Hello"
  4.     },
  5.     getters: {
  6.         getMessage: state => {
  7.             return state.message;
  8.         }
  9.     },
  10.     mutations: {
  11.         setMessage(state, str) {
  12.             state.message = str;
  13.         },
  14.     },
  15.     actions: {
  16.         setMessageAction({commit}, str) {
  17.             setTimeout(function () {
  18.                 commit('setMessage', str);
  19.             }, 5000);
  20.         }
  21.     },
  22.     modules: {}
  23. })

最后在 main.js 文件中引入 store/index.js 及 store 对象。

  1. import store from './store'
  3. new Vue({
  4.     store,
  5.     render: h => h(App)
  6. }).$mount('#app')

访问及变更

基本操作

在组件中可使用以下语句直接访问 Vuex 存储的状态。

  1. this.$store.state.message

另外组件的方法还可以提交一个变更。

  1. methods: {
  2.     setStoreMessage() {
  3.         this.$store.commit('setMessage', "This is a new message");
  4.     }
  5. }

通过提交 mutation 的方式可以更明确地追踪到状态的变化，因此不建议直接更改。

核心操作

Getter

Vuex 允许我们在 store 中定义“getter”，它就像计算属性一样，getter 的返回值会被缓存起来，且只有当相应的属性值发生了改变才会重新计算。

Getter 会暴露为 store.getters 对象，然后在组件中以属性的形式访问这些值。

  1. computed: {
  2.     getStoreMessage() {
  3.         return this.$store.getters.getMessage;
  4.     }
  5. }

Mutation

更改 Vuex 的 store 中存储的状态的唯一方法是提交 mutation。每个 mutation 都有一个字符串形式的事件类型（type）和一个回调函数（handler）。回调函数接受 state 作为第一个参数。

  1. mutations: {
  2.     setMessage(state, str) {
  3.         state.message = str;
  4.     },
  5. }

需要以相应的 type 调用 store.commit 方法：

  1. this.$store.commit('setMessage', "This is a new message");

Mutation 中定义的函数必须是同步函数。为了处理异步操作，可以定义 action。

Action

Action 类似于 mutation，但是 action 提交的是 mutation，而不是直接变更状态，且 action 可以包含任意异步操作。

Action 通过 store.dispatch 方法触发：

  1. methods: {
  2.     setStoreMessage() {
  3.         this.$store.dispatch('setMessageAction', "This is a new message");
  4.     }
  5. }

Module

Vuex 允许将 store 分割成模块（module），每个模块拥有自己的 state、mutation、action 以及getter，甚至还可以嵌套子模块。