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 教程。