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

快速开始

安装

首先,你需要安装 Vuex。你可以使用 npm 或 yarn 来安装:

npm install vuex --save
# 或者
yarn add vuex

创建 Store

在 Vue 应用程序中创建一个 Vuex store:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment(context) {
      context.commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

在 Vue 组件中使用

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState({
      count: state => state.count
    })
  },
  methods: {
    ...mapMutations([
      'increment'
    ]),
    ...mapActions([
      'increment'
    ])
  }
};

更多资源

想要了解更多关于 Vuex 的信息,请访问我们的官方文档:Vuex 官方文档


Vuex 是一个强大的状态管理库,能够帮助开发者更好地管理复杂的应用程序状态。希望这份指南能够帮助你快速上手 Vuex。

[center]Vuex Logo