Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

快速开始

以下是一个简单的 Vuex 应用程序结构：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  }
});

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app');

状态管理

Vuex 提供了一种集中式存储管理所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Mutations

Mutation 是一种提交更改的方式，它是同步的。

mutations: {
  increment(state) {
    state.count++;
  }
}

Actions

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

actions: {
  increment(context) {
    context.commit('increment');
  }
}

Getters

Getters 可以认为是 store 的计算属性。

getters: {
  doubleCount(state) {
    return state.count * 2;
  }
}

扩展阅读

想要了解更多关于 Vuex 的信息，可以访问我们的 Vuex 教程。

图片

Vuex State Management