5. Vuex
5.1 Vuex配置项
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mg4FUypL-1661175990238)(C:\Users\Joker\AppData\Roaming\Typora\typora-user-images\image-20220820183836136.png)]
创建 index.js
文件
// 该文件用于创建Vuex中最为核心的store
import Vue from 'vue';
// 引入Vuex
import Vuex from 'vuex';
//准备actions -- 用于相应组件中的动作
const actions = {
add(ctx, val){
ctx.commit('ADD', val);
},
sub(ctx, val){
ctx.commit('SUB', val);
}
}
// 准备mutaions -- 用于操作数据 (state)
const mutations = {
ADD(ctx, val){
ctx.number += val
},
SUB(ctx, val){
ctx.number -= val
}
}
// 准备state -- 用于存储数据
const state = {
number:12
}
// 相当于全局计算属性
const getters = {
bigNumber(){
return state.number * 10;
}
}
Vue.use(Vuex)
// 创建并暴露 store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
读取数据
$store.state.sum
修改数据
this.$store.dispatch('add', 3); // 'add' 为actions中的函数,3为参数
或者:
this.$store.commit('mutations中的方法名', 参数)
备注:若没有网络请求或其他业务逻辑组件中可以越过 actions,即不写
dispatch
,直接写commit
## 4.2 map 方法的使用
mapState方法
用于帮助我们映射 state
中的数据为计算属性
computed:{
// 对象写法
...mapState({number:'number', schoolName:'schoolName', loc:'loc'}),
// 数组写法
...mapState(['number', 'schoolName', 'loc'])
},
mapGetters 方法
用于帮助我们映射 getters
中的数据为计算属性
computed:{
// 对象写法
...mapGetters({
bigNumber: 'bigNumber'
}),
// 数组写法
...mapGetters(['bigNumber'])
}
mapActions
用于帮助我们生成与 actions
对话的方法,即:包含 $store.dispatch(xxx)
的函数
methods:{
...mapActions(['add', 'sub']),
...mapMutations({add:'ADD', sub:'SUB'})
},
mapMutations
用于帮助我们生成与 mutations
对话的方法,即:包含 $sotre.commit(xxxx)
的函数
methods:{
...mapActions(['add', 'sub']),
...mapMutations({add:'ADD', sub:'SUB'})
},
备注:mapActions 与 mapMutations使用时,若需要传递参数:在模板中绑定事件时传递好参数否则参数传递的是事件对象
5.2模块化+命名空间
-
目的:让代码更好维护,让多种数据分类更加明确
-
修改
store.js
// 该文件用于创建Vuex中最为核心的store import Vue from 'vue'; // 引入Vuex import Vuex from 'vuex'; const school = { namespaced : true, state:{ number:12, schoolName: 'ABC', loc: 'Beijing', }, actions:{ add(ctx, val){ ctx.commit('ADD', val); }, sub(ctx, val){ ctx.commit('SUB', val); } }, mutations:{ ADD(ctx, val){ ctx.number += val }, SUB(ctx, val){ ctx.number -= val } }, getters:{ } } const student = { namespaced: true, state:{ number:12, name:'王二', }, actions:{ add(ctx, val){ ctx.commit('ADD', val); }, sub(ctx, val){ ctx.commit('SUB', val); } }, mutations:{ ADD(ctx, val){ ctx.number += val }, SUB(ctx, val){ ctx.number -= val } }, getters:{ bigNumber(state){ return state.number * 10; } } } Vue.use(Vuex) // 创建并暴露 store export default new Vuex.Store({ modules:{ school, student } })
-
开启命名空间后,组件中读取 state 数据
// 自己读取 this.$store.state.school.name // 借助mapState ...mapState('school', ['name', 'loc', 'number'])
-
开启命名空间后,组件中读取getters数据
this.$store.getters['student/bigNumber'] ...mapGetters('student', ['bigNumber'])
-
开启命名空间后,组件中调用dispatch
this.$store.dispatch('student/add', 1) ...mapActions('student', {add:'ADD', sub:'SUB'})
-
开启命名空间后,组件中调用commit
this.$store.commit('student/ADD', 1) ...mapMutations('student', {add:'ADD', sub:'SUB'})
-