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

Vuex 的核心概念

  • State:应用的状态。
  • Getters:从 state 中派生出一些状态。
  • Mutations:提交 mutation 是更改状态的唯一方法。
  • Actions:提交 mutation 的方式,处理异步操作。
  • Modules:将 store 分成模块。

安装 Vuex

首先,你需要通过 npm 或 yarn 安装 Vuex:

npm install vuex --save

yarn add vuex

创建 Vuex 实例

在 Vue 应用程序中创建 Vuex 实例:

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')
    }
  }
})

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

使用 Vuex 状态

在组件中,你可以通过 this.$store 访问 Vuex 实例:

computed: {
  count() {
    return this.$store.state.count
  }
},
methods: {
  increment() {
    this.$store.dispatch('increment')
  }
}

更多信息

想了解更多关于 Vuex 的内容,可以访问我们的 Vuex 教程

Vuex_Logo