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

以下是一些 Vuex 的基本实例教程:

基础安装

首先,你需要在你的 Vue 项目中安装 Vuex:

npm install vuex --save

简单示例

1. 创建 Vuex 实例

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

2. 在 Vue 组件中使用

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

3. 获取状态

console.log(this.$store.state.count) // 0

高级用法

Vuex 还提供了模块化、插件、严格模式等高级用法,可以满足更复杂的应用需求。

更多信息,请访问 Vuex 官方文档


Vuex 是一个强大的工具,可以帮助你管理大型应用的状态。如果你对 Vuex 的模块化有疑问,可以查看模块化教程

Vuex_logo