Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
特点
- 集中式存储管理状态：所有组件的状态都存储在一个地方，易于管理和维护。
- 可预测的状态改变：通过显式的提交 mutation 改变状态，可以追踪所有的状态变化。
- 与 Vue 的组合使用：Vuex 与 Vue 的响应式系统深度集成，让状态的变化能够触发视图的更新。
安装
npm install 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,
computed: {
count() {
return this.$store.state.count
}
}
})
图片展示
Vuex 的核心概念之一是 mutation，它是一种提交更改的唯一方式。下面是 Vuex mutation 的一个示例。