当前位置： 首页 > news >正文

【vue】vuex实现组件间数据共享 vuex模块化编码 网络请求

news 来源：原创 2025/5/11 8:39:10

目录

一、vuex实现组件间数据共享

二、 vuex模块化编码

三、网络请求

模块化+命名空间小结:

总结不易~ 本章节对我有很大的收获， 希望对你也是！！！

本节素材已上传Gitee：yihaohhh/我爱Vue - Gitee.comhttps://gitee.com/liu-yihao-hhh/i-love---vue/tree/master/28._src_%E6%B1%82%E5%92%8C%E6%A1%88%E4%BE%8B_%E5%A4%9A%E7%BB%84%E4%BB%B6%E5%85%B1%E4%BA%AB%E6%95%B0%E6%8D%AE

 有过前面vuex四个map的引入，极大的缩短了我们构建dispatch 和 commit过程的流程，现在我们来创建两个组件Count 和 Person来通过vuex进行组件间数据共享

多组件共享数据就变得很简单了，新建一个组件Person就跟Count访问sum一样的考以访问sum

一、vuex实现组件间数据共享

往vuex添加Person的添加用户方法：ADD_PERSON

// 准备mutations——用于操作数据（state）
const mutations = {JIA(state, value) {console.log('mutations被调用了')state.sum += value},JIAN(state, value) {state.sum -= value},// person 添加一个人没有什么业务逻辑， 可以直接在mytations里面直接进行添加ADD_PERSON(state, value) {console.log('mutations中的ADD_PERSON被调用了')state.personList.unshift(value)}
}
// 准备state——用于存储数据
const state = {sum: 0,school: '武汉传媒学院',subject: '前端',personList: [{ id: '001', name: '张三' }]
}

Person来实现数据共享，拿取vuex里面的sum， 就直接...mapState就可以直接拿到

import {nanoid} from 'nanoid'
import {mapState, mapGetter, mapMuatations, mapActions} from 'vuex'
export default {name:'MyPerson',data() {return {name: ''}},computed: {...mapState(['personList', 'sum'])},methods: {add() {const personObj = {id:nanoid(), name:this.name}this.$store.commit('ADD_PERSON', personObj)this.name = ''}}
}

 本节素材已上传至Gitee：yihaohhh/我爱Vue - Gitee.comhttps://gitee.com/liu-yihao-hhh/i-love---vue/tree/master/29_src_%E6%B1%82%E5%92%8C%E6%A1%88%E4%BE%8B_vuex%E6%A8%A1%E5%9D%97%E5%8C%96%E7%BC%96%E7%A0%81

二、 vuex模块化编码

现在就遇到一个问题我们现在是开发一个订单系统，那我们就会遇到一个订单的增删改查，一个商品的增删改查，总之很多很多不同的程序都往一个mutations里面挤，最后mutations就会变得十分的臃肿，最最容易造成的就是git的版本冲突！

那么将各个功能分离出来，也是我们必须具备的能力，也十分简单！

在vuex里面将各个功能的actions、mutations、state、getters都准备好，然后分别对每个组件的共都封装好一个对象来存储这个四个属性

// 求和功能相关的配置 写成一个对象就好
const countOptions = {// 准备actions——用于响应组件中的动作actions: {jiaOdd(context, value) {console.log('jiaOdd被调用了')console.log(context)if (context.state.sum % 2) context.commit('JIA', value)},jiaWait(context, value) {console.log('jiaWait被调用了')setTimeout(() => { context.commit('JIA', value) }, 500)}},// 准备mutations——用于操作数据（state）mutations: {JIA(state, value) {console.log('mutations被调用了')state.sum += value},JIAN(state, value) {state.sum -= value},},// 准备state——用于存储数据state: {sum: 0,school: '武汉传媒学院',subject: '前端',},// 准备getters——用于将state里面的数据进行加工getters: {bigSum(state) {return state.sum * 10}}
}// 人员管理功能相关的配置 写成一个对象就好
const personsOptions = {actions: {},mutations: {// person 添加一个人没有什么业务逻辑， 可以直接在mytations里面直接进行添加ADD_PERSON(state, value) {console.log('mutations中的ADD_PERSON被调用了')state.personList.unshift(value)}},state: {personList: [{ id: '001', name: '张三' }]},getters: {}
}

将各个功能分割好后，就放在Vuex.store里面进行暴露，注意！！！modules是对你的功能配置进行重命名一样，如果懒，也可以采用对象的简写形式！

// 创建 并 暴露store
export default new Vuex.Store({modules: {countAbout: countOptions,personsAbout: personsOptions}
})

对外暴露后， 这里拿MyCount组件进行举例，你一看就懂怎么样引用vuex里面分割好的actions、mutations、state、getters属性

要想模板里面的属性名不变，就要提前在map里面解析好，这种引用方法还是挺简单的，一看就懂；同样MyPerson组件也是如此！！！

<template><div><h1>当前求和为：{{ sum }}</h1><h3>放大10倍的和：{{ bigSum }}</h3><h3>我在{{ school }}，学习{{ subject }}</h3><select v-model="n" name="" id=""><!-- 加上v-bind 就是动态数据绑定 value里面的值会被当作js表达式进行解析 不再是字符串 --><option :value="1">1</option><option :value="2">2</option><option :value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="jiaOdd(n)">当前求和为奇数再加</button><button @click="jiaWait(n)">等一等再加</button><h3 style="color: red;">Person组件的总人数是：{{ personList.length }}</h3></div>
</template><script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {name: 'MyCount',data() {return {n:1, // 用户当前选择的数字}},computed: {...mapState('countAbout', ['sum', 'school', 'subject']),...mapState('personsAbout', ['personList']),//数组写法...mapGetters('countAbout', ['bigSum'])},methods: {...mapMutations('countAbout', {increment:'JIA', decrement:'JIAN'}),...mapActions('countAbout', ['jiaOdd', 'jiaWait'])},mounted() {const x = mapState({he:'sum', xuexiao:'school', xueke:'subject'})console.log(x)}
}
</script>

那么此时分别将两个组件的功能都进行完整的分割后，最后的功能分割就来了！！！

 

const.js求和功能：

// 求和功能相关的配置 写成一个对象就好
export default {namespaced: true,// 准备actions——用于响应组件中的动作actions: {jiaOdd(context, value) {console.log('jiaOdd被调用了')console.log(context)if (context.state.sum % 2) context.commit('JIA', value)},jiaWait(context, value) {console.log('jiaWait被调用了')setTimeout(() => { context.commit('JIA', value) }, 500)}},// 准备mutations——用于操作数据（state）mutations: {JIA(state, value) {console.log('mutations被调用了')state.sum += value},JIAN(state, value) {state.sum -= value},},// 准备state——用于存储数据state: {sum: 0,school: '武汉传媒学院',subject: '前端',},// 准备getters——用于将state里面的数据进行加工getters: {bigSum(state) {return state.sum * 10}}
}

那么MyPersons组件问题就来了！计算属性里面我是map写的，可以很轻松的就解析vuex里面的内容，但是add方法里面呢？我却很麻烦才能拿到vuex里面功能分割后的内容！

person.js添加人员功能： 

  computed: {personList() {return this.$store.state.personsAbout.personList},sum() {return this.$store.state.countAbout.sum},firstPersonName() {return this.$store.getters['personsAbout/firstPersonName']}},methods: {add() {const personObj = {id:nanoid(), name:this.name}this.$store.commit('personsAbout/ADD_PERSON', personObj)this.name = ''},addWang() {const personObj = {id:nanoid(), name:this.name}this.$store.dispatch('personsAbout/addPersonWang', personObj)this.name = ''}}

所以还是比较推荐map写法的！毕竟那是配套的~

本节素材已上传至Gitee：yihaohhh/我爱Vue - Gitee.comhttps://gitee.com/liu-yihao-hhh/i-love---vue/tree/master/29_src_%E6%B1%82%E5%92%8C%E6%A1%88%E4%BE%8B_vuex%E6%A8%A1%E5%9D%97%E5%8C%96%E7%BC%96%E7%A0%81

三、网络请求

最后就是网络请求这一条路我们还没有讲过，现在来说说~

在vuex的Person.js里面添加一个actions addPersonServer方法来随机添加一个人的名字 

这个网址是每日一句，可以不断的刷新那种经典句子，有兴趣可以自己看看：https://international.v1.hitokoto.cn/ 然后进行axios请求，如果请求成功就得到d的对象itokoto然后进行添加即可

  actions: {addPersonServer(context) {axios.get('https://international.v1.hitokoto.cn/').then(response => {console.log(response.data.hitokoto)context.commit('ADD_PERSON', { id: nanoid(), name: response.data.hitokoto })},error => {alert(error.message)})}},

最后就在MyPersons组件里面进行调用即可：

    <button @click="addPersonServer">添加一个人，名字随机</button>addPersonServer() {this.$store.dispatch('personsAbout/addPersonServer')}

模块化+命名空间小结:

  1. 目的：让代码更好维护，让多种数据分类更加明确。

  2. 修改store.js

      const countAbout = {namespaced:true,//开启命名空间state:{x:1},mutations: { ... },actions: { ... },getters: {bigSum(state){return state.sum * 10}}}​const personAbout = {namespaced:true,//开启命名空间state:{ ... },mutations: { ... },actions: { ... }}​const store = new Vuex.Store({modules: {countAbout,personAbout}})

  3. 开启命名空间后，组件中读取state数据：

      //方式一：自己直接读取this.$store.state.personAbout.list//方式二：借助mapState读取：...mapState('countAbout',['sum','school','subject']),

  4. 开启命名空间后，组件中读取getters数据：

      //方式一：自己直接读取this.$store.getters['personAbout/firstPersonName']//方式二：借助mapGetters读取：...mapGetters('countAbout',['bigSum'])

  5. 开启命名空间后，组件中调用dispatch

      //方式一：自己直接dispatchthis.$store.dispatch('personAbout/addPersonWang',person)//方式二：借助mapActions：...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  6. 开启命名空间后，组件中调用commit

      //方式一：自己直接committhis.$store.commit('personAbout/ADD_PERSON',person)//方式二：借助mapMutations：...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

总结不易~ 本章节对我有很大的收获， 希望对你也是！！！

相关文章：

  • 使用 Jackson 在 Java 中解析和生成 JSON
  • C.printf 函数基础
  • 大模型的RAG技术系列（三）
  • linux和linux 、linux和windows实现文件复制笔记
  • 基于ssm+mysql的快递管理系统(含LW+PPT+源码+系统演示视频+安装说明)
  • C语言复习--柔性数组
  • Vite Proxy配置详解：从入门到实战应用
  • Activity动态切换Fragment
  • 养生：为健康生活添彩
  • 【Linux第三章】vim
  • 达索PLM系统是什么？有什么用？
  • 亿级流量系统架构设计与实战（六）
  • 【MySQL】事务（重点）
  • 【计算机视觉】OpenCV实战项目：FunnyMirrors：基于OpenCV的实时哈哈镜效果实现技术解析
  • PyTorch API 9 - masked, nested, 稀疏, 存储
  • Linux 阻塞和非阻塞 I/O 简明指南
  • 复习javascript
  • Python_day21
  • 基于大模型的新型隐球菌脑膜炎智能诊疗全流程系统设计与实现的技术方案文档
  • 青少年编程与数学 02-019 Rust 编程基础 05课题、复合数据类型
  • 被取消总统候选人资格，金文洙：将采取政治法律措施讨回公道
  • 洛杉矶奥组委确认2028年奥运会和残奥会开闭幕式场地
  • “三德子”赵亮直播间卖“德子土鸡”，外包装商标实为“德子土”
  • 习近平离京赴莫斯科对俄罗斯进行国事访问并出席纪念苏联伟大卫国战争胜利80周年庆典
  • 上海明后天将迎强风大雨，陆地最大阵风7~9级
  • 重庆动物园大熊猫被游客扔玻璃瓶，相同地方曾被扔可乐瓶