Vuex 是 Vue.js 的官方状态管理工具,用于管理应用程序中的共享状态。它可以将应用程序的状态集中到一个容器中,使得状态的变化可以被追踪和管理。Vuex 基于 Flux 设计模式,包含了四个核心概念:state、mutations、actions 和 getters。
使用 Vuex 首先需要安装它,你可以通过 npm 来安装:
npm install vuex --save
然后,在 Vue 应用程序中引入 Vuex 并创建一个 store 实例:
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')
}
},
getters: {
getCount(state) {
return state.count
}
}
})
以上代码创建了一个简单的 store 实例,其中包含了一个状态 count、一个 mutation 方法 increment、一个 action 方法 increment 和一个 getter 方法 getCount。状态可以通过 this.$store.state.count
来获取,也可以通过 mapState
辅助函数来获取;mutation 方法可以通过 this.$store.commit('increment')
来调用,也可以通过 mapMutations
辅助函数来调用;action 方法可以通过 this.$store.dispatch('increment')
来调用,也可以通过 mapActions
辅助函数来调用;getter 方法可以通过 this.$store.getters.getCount
来获取,也可以通过 mapGetters
辅助函数来获取。
Vuex 在 Vue.js 应用程序中的使用非常灵活,我们可以通过它来管理应用程序的任何状态,包括用户登录状态、购物车数量、主题色等等。