Vue学习第26天——vuex中的模块化和命名空间的详解及案例练习
2023-09-11 14:21:26 时间
目录
一、模块化与命名空间
1、目的
让store组件代码更有条理性,代码更好维护,数据分类更加明确
2、比较
3、模块化代码
const CountAbout = {
state:{...},
actions:{...},
mutations:{...},
getters:{...}
}
const CatsAbout = {
state:{...},
actions:{...},
mutations:{...},
getters:{...}
}
export default new Vuex.Store({
modules:{
CountAbout,
CatsAbout,
}
})
4、命名空间
开启命名空间:namespaced : true
二、多组件共享数据案例
store/index.js代码
//引入vue
import Vue from "vue";
//引入vuex库
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex)
//actions用于响应组件中用户的动作
const actions ={
odd({commit},num){
if(state.sum % 2 != 0){
commit("ODD",num)
}
},
};
//mutations用于修改数据(state)
const mutations ={
ADD(state,num){
state.sum += num;
},
ODD(state,num){
state.sum += num
},
ADDCAT(state,name){
state.cats.push(name)
}
};
//state保存具体的数据
const state = {
sum:0,
cats:['憨瓜','波妞','快来']
};
const getters = {
bigSum(state){
return state.sum*10
}
}
//暴露store
export default new Vuex.Store({
actions,
mutations,
state,
getters
})
Count组件代码
<template>
<div>
<h3>Count组件当前求和为:{{sum}}</h3>
<select @click="selectNum($event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add(num)">+</button>
<button @click="odd(num)">当和为奇数再加</button>
<h3>sum放大十倍是:{{bigSum}},<span>Cats组件猫咪个数为:{{cats.length}}</span></h3>
<input type="text" placeholder="请输入宠物名称" v-model="catName">
<button @click="addCat">添加宠物名称</button>
</div>
</template>
<script>
import {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
name: 'Count',
data(){
return {
num:1,
catName:''
}
},
methods:{
...mapMutations({"add":"ADD"}),
...mapActions(["odd"]),
selectNum(){
this.num=Number(event.target.value)
},
addCat(){
this.$store.commit("ADDCAT",this.catName.trim());
this.catName=''
}
},
computed:{
...mapState(["sum","cats"]),
...mapGetters(["bigSum"])
}
}
</script>
<style scoped>
button {
margin-left: 5px;
}
span {
color: red;
}
</style>
Cats组件代码
<template>
<div>
<h3>Cats组件喵喵学员名称</h3>
<ul>
<li v-for="(cat,index) in cats" :key="index">
<span>{{cat}}</span>
</li>
</ul>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name:"Cats",
computed:{
...mapState(["cats"])
}
}
</script>
<style >
span {
margin-left: 10px;
}
</style>
运行结果
三、模块化代码
优化以上案例,让代码更具有条理性,更易于维护
index.js文件
//引入vue
import Vue from "vue";
//引入vuex库
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex);
//Count组件状态
const CountAbout = {
//开启命名空间
namespaced:true,
state:{
sum:0,
},
actions:{
odd(context,num){
if(context.state.sum % 2 != 0){
context.commit("ODD",num)
}
},
},
mutations:{
ADD(state,num){
state.sum += num;
},
ODD(state,num){
state.sum += num
},
},
getters:{
bigSum(state){
return state.sum*10
}
}
}
//Cats组件状态
const CatsAbout = {
namespaced:true,
state:{
cats:['憨瓜','波妞','快来']
},
mutations:{
ADDCAT(state,name){
state.cats.push(name)
}
}
}
export default new Vuex.Store({
modules:{
CountAbout,
CatsAbout,
}
})
Count组件代码
<template>
<div>
<h3>Count组件当前求和为:{{sum}}</h3>
<select @click="selectNum($event)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add(num)">+</button>
<button @click="odd(num)">当和为奇数再加</button>
<h3>sum放大十倍是:{{bigSum}},<span>Cats组件猫咪个数为:{{cats.length}}</span></h3>
<input type="text" placeholder="请输入宠物名称" v-model="catName">
<button @click="addCat">添加宠物名称</button>
</div>
</template>
<script>
import {mapState,mapGetters,mapActions,mapMutations} from "vuex";
export default {
name: 'Count',
data(){
return {
num:1,
catName:''
}
},
methods:{
...mapMutations('CountAbout',{"add":"ADD"}),
...mapActions('CountAbout',['odd']),
selectNum(){
this.num=Number(event.target.value)
},
addCat(){
this.$store.commit("CatsAbout/ADDCAT",this.catName.trim());
this.catName=''
}
},
computed:{
...mapState('CountAbout',['sum']),
...mapState('CatsAbout',['cats']),
...mapGetters('CountAbout',['bigSum'])
}
}
</script>
<style scoped>
button {
margin-left: 5px;
}
span {
color: red;
}
</style>
Cats组件代码
<template>
<div>
<h3>Cats组件喵喵学员名称</h3>
<ul>
<li v-for="(cat,index) in $store.state.CatsAbout.cats" :key="index">
<span>{{cat}}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name:"Cats",
}
</script>
<style >
span {
margin-left: 10px;
}
</style>
四、案例注意项
1、context与commit
在action函数中,第一个参数可以用context
,也可以用{commit}
,当我们模块化时必须用context,使用{commit}会报错
报错截图
2、开启命名空间
模块化之后,必须开启命名空间来读取store中的状态
,不然会报错
报错代码
[vuex] module namespace not found in mapState(): CatsAbout/
五、总结
开启命名空间之后,组件中读取store中的状态
1、读取state
//方法一:直接读取
this.$store.state.CatsAbout.cats
//方法二:通过mapState读取
...mapState('CatsAbout',['cats']),
2、读取getters
//方法一:直接读取
this.$store.getters('CountAbout/bigSum')
//方法二:通过mapGetters读取
...mapGetters('CountAbout',['bigSum']),
3、调用dispatch
//方法一:直接读取
this.$store.dispatch('CountAbout/odd',num)
//方法二:通过mapActions读取
...mapActions('CountAbout',['odd']),
4、调用commit
//方法一:直接读取
this.$store.commit('CountAbout/ADD',num)
//方法二:通过mapMutations读取
...mapMutations('CountAbout',{"add":"ADD"}),
相关文章
- Vue笔记:vue-router
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue_(Router路由)-vue-router路由的基本用法
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- vue项目中axios封装总结
- nodejs的划时代意义,以及vue和nodejs的关系
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- Vue+Spring boot前后端响应流程总结
- 一个典型的Vue应用的App.vue
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- Vue.js 组件(component)demo小案例
- Vue中vue-i18n结合element-ui实现国际化
- 219:vue+openlayers 加载gif文件,采用CSS设置gif背景的方式
- 209:vue+openlayers 绘制矩形,拖拽编辑Modify后仍然为矩形
- 027:vue+openlayers加载远程shp数据(示例代码)
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue(二)vue 指令及用法举例
- 【vue】vue的插值语法及常用指令的应用_02
- Vue:第一个vue-cli项目
- Vue学习笔记——vue-router