Vuex:模块化Module :VCA模式

VCA中不支持辅助函数,因为辅助函数中是用this.$store,而VCA中没有绑定this的

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

这句话的意思是,如果把所有的状态都放在/src/store/index.js中,当项目变得越来越大的时候,Vuex会变得越来越难以维护

分成模块化后,每个人负责自己的那个模块开发,然后在/src/store.index.js中将这些模块进行汇总,这样可以避免多人开发的协调问题。

案列:

/src/router/index.js 路由器

import { createRouter, createWebHashHistory,createWebHistory } from "vue-router"; //导入vue-router路由模块,createWebHashHistor函数
//import Home from "../views/Home.vue" //异步加载的组件,这里不需要
//import List from "../views/List.vue" //异步加载的组件,这里不需要进行导入,所以要注释掉const routes = [{path: "/",  //路径:        redirect: {name: "ListA" //重定向到路由名称为mylist的路由中,这样当浏览器输入的是:http://localhost:5173/ 则会重定向跳转到 http://localhost:5173/list}},{path: "/lista",  //路径//当路由被触发时,该组件才会被异步加载,举列:打开页面就不会加载所有的组件,而是根据当前页面需要的组件进行异步加载//这样可以减少初始加载时间,提升用户体验,同时也节省了不必要的资源消耗。name:"ListA",component: () => import("../views/ListA.vue")},{path: "/listb",  //路径//当路由被触发时,该组件才会被异步加载,举列:打开页面就不会加载所有的组件,而是根据当前页面需要的组件进行异步加载//这样可以减少初始加载时间,提升用户体验,同时也节省了不必要的资源消耗。name:"ListB",component: () => import("../views/ListB.vue")}  
]//创建路由对象
const router = createRouter({//history:createWebHashHistory()   这种方式是按照hash路由模式来路由导航,这种路由模式的url地址会存在 /#/ 样式是:http://localhost:5173/#/listhistory: createWebHistory(),     //这种方式基于浏览器 history API 的路由模式,url的样式是:http://localhost:5173/listroutes, //routes:routes的缩写})export default router //导出router路由对象//导出router路由对象

状态管理器:模块

/src/views/ListAModule.js  ListA.vue组件单独使用的状态管理器模块

//ListA.vue组件使用的vuex模块
import axios from 'axios'
const ListAModule = {namespaced: true, //开启命名空间:建议开启,开启的好处是可以vuex模块化开发中使用辅助函数,否则无法使用state() {return {name: "张三",datalist: []}},mutations: {changeName(state, strParams) {state.name = strParams},dataListInit(state, arrParams) {state.datalist = arrParams;}},actions: {async getDataList(store) {//异步const result = await axios({url: "https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=7069698",headers: {'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16992764191480200349024257"}','X-Host': 'mall.film-ticket.film.list'}})//同步:向mutations提交数据:触发dataListInit函数,并向函数传递了一个数组参数store.commit("dataListInit", result.data.data.films);}},getters: {filterDataList(state) {return (keyword) => {console.log(state.datalist);return state.datalist.filter(item => item.name.includes(keyword));}}}
}
export default ListAModule;

/src/views/ListBModule.js    ListB.vue组件单独使用的状态管理器模块

//ListB.vue组件使用的vuex模块
import axios from 'axios'
const ListBModule = {namespaced: true, //开启命名空间:建议开启,开启的好处是可以vuex模块化开发中使用辅助函数,否则无法使用state() {return {name: "李四",datalist: []}},mutations: {changeName(state, strParams) {state.name = strParams},dataListInit(state, arrParams) {state.datalist = arrParams;}},actions: {async getDataList(store) {//异步const result = await axios({url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=3777796",headers: {'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16992764191480200349024257","bc":"110100"}','X-Host': 'mall.film-ticket.cinema.list'}});console.log("获取数据")//同步:向mutations提交数据:触发dataListInit函数,并向函数传递了一个数组参数store.commit("dataListInit", result.data.data.cinemas);}},getters: {filterDataList(state) {return (intParams) => {return state.datalist.filter(item => item.eTicketFlag == intParams)}}}
}export default ListBModule;

状态管理器:模块汇总

import axios, { Axios } from 'axios';
import { createStore } from 'vuex'import ListAModule from '../views/ListAModule.js'
import ListBModule from '../views/ListBModule.js' //导入模块const store = createStore({modules: {ListAModule,  //ListAModel:ListAModel简写  注册ListAModel模块ListBModule   //ListBModel:ListBModel简写  注册ListBModel模块}
});export default store

注册路由器 和 状态管理器

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'import router from "../src/router/index.js" //导入状态管理器js 
import store from "../src/store/index.js" //导入状态管理器js var app=createApp(App)app.use(router);app.use(store)  //注册vuex插件:状态管理器app.mount("#app")

ListA.vue组件:电影列表

<template><div><div><!-- 从store中的state中取数:获取ListAModule模块state中的name -->姓名: {{ store.state.ListAModule.name  }}</div><input type="text" v-model.lazy="keyword" placeholder="搜索"><ul><!-- 从store中的Getters中取数:执行ListAModule模块Getters中的filterDataList方法 --><li v-for="item in store.getters['ListAModule/filterDataList'](keyword)" :key="item.filmId">{{ item.name }}</li></ul></div>
</template>
<script setup>
// VCA中不支持辅助函数,因为辅助函数中是用this.$store,而VCA中没有绑定this的
import { useStore } from 'vuex'
import {ref,onMounted} from 'vue'
const store = useStore();const keyword=ref("");
onMounted(()=>{if(store.state.ListAModule.datalist.length===0){store.dispatch("ListAModule/getDataList");//执行ListAModule模块Actions中的getDataList方法}
})</script>
<style scoped>
li {padding: 10px;
}
</style>

ListB.vue组件:影院列表

<template><div><!-- 从store中的state中取数:获取ListBModule模块state中的name --><div> 姓名:{{ store.state.ListBModule.name }}</div><select v-model="type"><option :value="0">APP订票</option><option :value="1">前台兑换</option></select><ul><!-- 从store中的Getters中取数:执行ListBModule模块Getters中的filterDataList方法 --><li v-for="item in store.getters['ListBModule/filterDataList'](type)" :key="item.cinemaId"> {{ item.name }}</li></ul></div>
</template>
<script setup>
// VCA中不支持辅助函数,因为辅助函数中是用this.$store,而VCA中没有绑定this的
import { useStore } from 'vuex'
import { ref, onMounted } from 'vue'
const store = useStore();const type = ref(0);
onMounted(() => {if (store.state.ListBModule.datalist.length === 0) {store.dispatch("ListBModule/getDataList"); //执行ListBModule模块Actions中的getDataList方法}
})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/187804.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

初识Linux:目录路径

目录 提示&#xff1a;以下指令均在Xshell 7 中进行 一、基本指令&#xff1a; 二、文件 文件内容文件属性 三、ls 指令拓展 1、 ls -l &#xff1a; 2、ls -la&#xff1a; 3、ls [目录名] &#xff1a; 4、ls -ld [目录名]&#xff1a; 四、Linux中的文件和…

SpringBoot 使用EasyExcel 导出Excel报表(单元格合并)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、导入依赖二、代码1. 导出简单的Excel2. 代码控制导出报表的格式 总结 前言 SpringBoot 使用Alibaba提供的EasyExcel导出Excel报表。 本文中涉及的业务逻辑…

asp.net校园招聘管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net 校园招聘管理系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言开发 应用技术&#xff1a;asp.net c#s…

IP行业API助力于网络分析和数据挖掘

引言 在当今数字化时代&#xff0c;数据成为了企业、科研机构和政府决策者的重要资源&#xff0c;而IP行业API则成为了数据分析及挖掘的工具之一。IP行业API是一种能够查询IP地址所属的行业分类信息的应用程序接口&#xff0c;它能够提供在网络分析、用户行为分析及大数据挖掘…

LeetCode 面试题 16.20. T9键盘

文章目录 一、题目二、C# 题解 一、题目 在老式手机上&#xff0c;用户通过数字键盘输入&#xff0c;手机将提供与这些数字相匹配的单词列表。每个数字映射到0至4个字母。给定一个数字序列&#xff0c;实现一个算法来返回匹配单词的列表。你会得到一张含有有效单词的列表。映射…

农业大棚智能化改造升级与远程视频监管方案,助力智慧农业建设发展

一、需求分析 随着现代化技术的发展&#xff0c;农业大棚的智慧化也成为当前备受关注的智慧农业发展手段。利用先进的信息化手段来对农业大棚进行管理&#xff0c;采集和掌握作物的生长状况、作业监督、生态环境等信息数据&#xff0c;实现精准操作、精细管理&#xff0c;远程…

美格智能5G RedCap模组顺利完成中国联通5G物联网OPENLAB开放实验室认证

近日&#xff0c;美格智能5G RedCap模组SRM813Q顺利通过中国联通5G物联网OPENLAB开放实验室端到端的测试验收&#xff0c;并获得OPENLAB实验室的认证证书。这标志着该模组产品各项性能均已符合RedCap商用标准&#xff0c;为5G RedCap规模商用奠定了坚实基础。 中国联通5G物联网…

Kubernetes平台部署Grafana Loki Promtail系统

部署结构图&#xff1a; Loki 是主服务&#xff0c;负责存储日志和处理查询promtail 是代理&#xff0c;负责收集日志并将其发送给 lokiGrafana 用于 UI 展示 只要在应用程序服务器上安装promtail来收集日志然后发送给Loki存储&#xff0c;就可以在Grafana UI界面通过添加Lok…

Python基础教程:类--继承和方法的重写

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 什么是继承 继承就是让类与类之间产生父子关系&#xff0c;子类可以拥有父类的静态属性和方法 继承就是可以获取到另一个类中的静态属性和普通方法&#xff08;并非所有成员&#xff09; 在python中&#xff0c;新建的类可…

导轨式安装压力应变桥信号处理差分信号输入转换变送器0-10mV/0-20mV/0-±10mV/0-±20mV转0-5V/0-10V/4-20mA

主要特性 DIN11 IPO 压力应变桥信号处理系列隔离放大器是一种将差分输入信号隔离放大、转换成按比例输出的直流信号导轨安装变送模块。产品广泛应用在电力、远程监控、仪器仪表、医疗设备、工业自控等行业。此系列模块内部嵌入了一个高效微功率的电源&#xff0c;向输入端和输…

Visual Studio2022安装教程【图文详解】(大一小白)编译软件

工欲善其事&#xff0c;必先利其器。想要学好编程&#xff0c;首先要把手中的工具利用好&#xff0c;今天小编教一下大家如何下载安装并使用史上最强大的编译器--Visual Studio&#x1f357; 一.Visual Studio下载及安装 https://visualstudio.microsoft.com/ 打开文件 点击.ex…

基于ubuntu 22, jdk 8x64搭建图数据库环境 hugegraph--google镜像chatgpt

基于ubuntu 22, jdk 8x64搭建图数据库环境 hugegraph download 环境 uname -a #Linux whiltez 5.15.0-46-generic #49-Ubuntu SMP Thu Aug 4 18:03:25 UTC 2022 x86_64 x86_64 x86_64 GNU/Linuxwhich javac #/adoptopen-jdk8u332-b09/bin/javac which java #/adoptopen-jdk8u33…

对于线程的收尾

一)对于synchronized的锁策略: synchronzed是一个自适应的锁&#xff0c;应该根据具体情况来决定选取那种锁策略&#xff1b; 1)synchronized既是一个乐观锁又是一个悲观锁&#xff0c;一开始是一个乐观锁&#xff0c;但是如果发现锁冲突的概率比较高&#xff0c;就会自动转化成…

主题模型LDA教程:一致性得分coherence score方法对比(umass、c_v、uci)

文章目录 主题建模潜在迪利克雷分配&#xff08;LDA&#xff09;一致性得分 coherence score1. CV 一致性得分2. UMass 一致性得分3. UCI 一致性得分4. Word2vec 一致性得分5. 选择最佳一致性得分 主题建模 主题建模是一种机器学习和自然语言处理技术&#xff0c;用于确定文档…

Linux驱动开发——USB设备驱动

目录 一、 USB 协议简介 二、 Linux USB 驱动 三、 USB 设备驱动实例 一、 USB 协议简介 USB(Universal Serial Bus&#xff0c;通用串行总线)正如它的名字一样&#xff0c;是用来连接PC外设的一种通用串行总线&#xff0c;即插即用和易扩展是它最大的特点。所谓即插即用&am…

Edge浏览器新建标签页如何更改为指定网址

Edge浏览器新建标签页如何更改为指定网址&#xff1f; 启动时新建标签页 不是说启动时&#xff0c;而是加号新建标签页时候 启动时 新建标签页 New Tab Changer 可以了 如果没有需要应用商店下载 参考文章

Clickhouse 学习笔记(6)—— ClickHouse 分片集群

前置知识&#xff1a; Clickhouse学习笔记&#xff08;5&#xff09;—— ClickHouse 副本-CSDN博客 与副本对比&#xff1a; 副本虽然能够提高数据的可用性&#xff0c;降低丢失风险&#xff0c;但是每台服务器实际上必须容纳全量数据&#xff0c;对数据的横向扩容没有解决 …

工厂设备报修的流程是怎样的?维修流程要如何优化?

在当今高度自动化的生产环境中&#xff0c;工厂设备的正常运行无疑对于企业的生产效率和经济效益具有至关重要的影响。然而&#xff0c;设备故障是生产过程中不可避免的现象。当设备发生故障时&#xff0c;如何快速、有效地进行报修、维修&#xff0c;以恢复设备的正常运转&…

企业年会/年终活动如何邀请媒体记者报道?

​媒体邀约是企业或组织进行宣传的重要手段之一。通过邀请媒体参加活动&#xff0c;可以增加活动的曝光度和知名度&#xff0c;吸引更多的关注和参与。同时&#xff0c;媒体报道还可以提高企业或组织的权威性和可信度&#xff0c;从而让公众更容易接受其传达的信息。 企业年会或…

【 云原生 | K8S 】kubectl 详解

目录 1 kubectl 2 基本信息查看 2.1 查看 master 节点状态 2.2 查看命名空间 2.3 查看default命名空间的所有资源 2.4 创建命名空间app 2.5 删除命名空间app 2.6 在命名空间kube-public 创建副本控制器&#xff08;deployment&#xff09;来启动Pod&#xff08;nginx-wl…