vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理数据,以相应的规则保证状态以一种可预测的方式发生变化
五大核心概念
state 共享数据源
直接使用:this.$store.state.变量名 // 不分模块
this.$store.state.模块名.变量名 // 分模块开启命名空间
映射使用:import { mapState } from 'vuex'
export default {
computed: {
...mapState(['state变量名']) // 不分模块
...mapState('模块名', ['state变量名']) // 分模块开启命名空间
}
}
mutations 同步任务,唯一可以修改state数据的地方
直接使用:this.$store.commit('mutations方法名', 具体值) // 不分模块
this.$store.commit('模块名/mutations方法名', 具体值) // 分模块开启命名空间
映射使用:import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations(['mutations方法名']) // 不分模块
...mapMutations('模块名', ['mutations方法名']) // 分模块开启命名空间
}
}
actions 异步任务,修改数据源先提交到 mutations
直接使用:this.$store.dispatch('actions方法名', 具体值) // 不分模块
this.$store.dispatch('模块名/actions方法名', 具体值) // 分模块开启命名空间
映射使用:import { mapActions } from 'vuex'
export default {
methods: {
...mapActions(['actions方法名']) // 不分模块
...mapActions('模块名', ['actions方法名']) // 分模块开启命名空间
}
}
getters vuex中的计算属性
直接使用:this.$store.getters.计算属性名 // 不分模块
this.$store.getters['模块名/计算属性名'] // 分模块开启命名空间
映射使用:import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['计算属性名']) // 不分模块
...mapGetters('模块名', ['计算属性名']) // 分模块开启命名空间
}
}
modules 分模块
模块化vuex, 利于维护数据,分工明确,自己模块管理自己的数据
import Vue from 'vue'
import Vuex from 'vuex'
// 注册
Vue.use(Vuex)
const store = new Vuex.store({
modules: {
// 模块名: 模块
}
})