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

基本概念

  • State：应用程序的状态。
  • Getters：从 state 中派生出一些状态。
  • Mutations：提交 mutation 是更改状态的唯一方法。
  • Actions：提交 mutation 的方式，处理异步操作。

示例

以下是一个简单的 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');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

<!-- App.vue -->
<template>
  <div id="app">
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
    <p>Double Count: {{ doubleCount }}</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

更多信息

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

图片示例

Vuex 的核心概念可以用以下图片来表示：

Vuex State Mutation Action