Vuex 是 Vue.js 官方的状态管理库。它可以集中存储应用的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex有以下几个特点:
- 单一状态树:整个应用只有一个 store 实例。状态存储在一个对象里面。
- 在 mutation 中更改状态:更改 store 中的状态的唯一办法是提交 mutation。不可以直接更改状态。
- 在组件中读取状态:你可以在组件里通过 this.$store 访问 store 实例并读取状态。
- 在actions中异步操作:异步逻辑都应该放到 action 中。从组件触发 action,在 action 中处理。
- 通过 getter 派生状态:可以让你从 state 中派生出一些状态,用于组件进行读取。
- 严格模式:在开发环境下,如果 mutation 里出现了非 mutation 函数类型的调用,将会抛出错误。这能确保所有的状态变更都能被调试工具跟踪到。
使用Vuex通常需要几个步骤:
- 安装 Vuex 包:
npm install vuex
- 创建Store:
import Vuex from 'vuex'
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
- 在根组件混入store:
new Vue({
el: '#app',
store,
render: h => h(App)
})
- 通过 this.$store 访问:
this.$store.state.count
- 通过提交 mutation 更改状态:
this.$store.commit('increment')
例如,一个简单的计数器:
// store.js
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
// Counter.vue
<p>{{ $store.state.count }}</p>
<button @click="$store.commit('increment')">+</button>
// main.js
import Vue from 'vue'
import store from './store'
import Counter from './Counter'
new Vue({
el: '#app',
store,
render: h => h(Counter)
})
Vuex可以帮助我们管理共享状态,并以一种可预测的方式发生状态变更。它增加了构建大型应用的可维护性。