Vuex:模块化Module :VOA模式

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,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/#/list
    history: createWebHistory(),     //这种方式基于浏览器 history API 的路由模式,url的样式是:http://localhost:5173/list
    routes, //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;

状态管理器:模块汇总

/src/store/index.js 状态管理器:汇总ListAModule与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>
            姓名: {{ name }}
        </div>
        <input type="text" v-model.lazy="keyword"  placeholder="搜索">
        <ul>
            <li v-for="item in filterDataList(keyword)" :key="item.filmId">{{ item.name }}</li>
        </ul>
    </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
    mounted() {
        if (this.datalist.length === 0) {
            this.getDataList();
        }
    },
    data() {
        return {
            keyword: "",
        }
    },
    methods: {
        ...mapMutations('ListAModule', ["changeName", "dataListInit"]),
        ...mapActions('ListAModule', ["getDataList"]),
    },
    computed: {
        ...mapState('ListAModule', ["name", "datalist"]),
        ...mapGetters('ListAModule', ["filterDataList"])
    }
}
</script>
<style scoped>
li {
    padding: 10px;
}
</style>

ListB.vue组件:影院列表

<template>
    <div>
        <!-- 采用辅助函数的方式从store中的state中取数 -->
        <div> 姓名:{{ name }}</div>
        <!-- 常规方式去store中的state中取数 -->
        <div> 姓名:{{ $store.state.ListAModule.name}}</div>
        <select v-model="type">
            <option :value="0">APP订票</option>
            <option :value="1">前台兑换</option>
        </select>
        <ul>
            <!-- 常规方式去store中的Getters(计算属性)中取数 -->
            <!-- <li v-for="item in $store.getters['ListBModule/filterDataList'](type)" :key="item.cinemaId"> {{ item.name }}</li> -->
            <!-- 采用辅助函数的方式从store中的state中取数 -->
            <li v-for="item in filterDataList(type)" :key="item.cinemaId"> {{ item.name }}</li>
        </ul>
    </div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
    mounted() {       
        if (this.datalist.length === 0) {
            this.getDataList(); //采用辅助函数: ...mapActions('ListBModule', ["getDataList"]), 执行ListBModule模块中的getDataList方法

            //this.$store.dispatch("ListBModule/getDataList"); //采用常规方式执行ListBModule模块中的getDataList方法
        }      
    },
    data() {
        return {
            type:0

        }
    },
    methods: {
        ...mapMutations('ListBModule', ["changeName", "dataListInit"]), //将store中ListBModule模块的Mutations函数展开,在DOM中可以直接用:如changeName(),dataListInit() 在<script>中也可以直接用:如this.changeName(),this.dataListInit()
        ...mapActions('ListBModule', ["getDataList"]), //将store中ListBModule模块的Actions函数展开,在DOM中可以直接用:如getDataList() 在<script>中也可以直接用:如this.getDataList()
    },
    computed: {
        ...mapState('ListBModule', ["name", "datalist"]), //将store中的State数据展开,在DOM中可以直接用:如name 在<script>中也可以直接用:如this.name()
        ...mapGetters('ListBModule', ["filterDataList"])  //将store中ListBModule模块的Getters函数展开,在DOM中可以直接用:如filterDataList() 在<script>中也可以直接用:如this.filterDataList()
    }
}
</script>

效果图

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

推荐 8 款OCR工具(二)完结篇

双十一&#xff0c;又要剁手了&#xff0c;但我还是 推荐 8 款OCR工具&#xff01; 当你感到迷茫时&#xff0c;不妨停下来&#xff0c;深呼吸&#xff0c;重新审视自己所处的位置和你的内心。这样的简单行为可能会帮助你找到方向。 SimpleOCR 网址&#xff1a;https://simple…

web:[网鼎杯 2018]Fakebook

题目 点进页面&#xff0c;页面显示为 查看源代码 用dirsearch扫一下&#xff0c;看一下有什么敏感信息泄露 扫出另一个flag.php和robots.txt&#xff0c;访问flag.php回显内容为空 请求robots.txt 网页提示/user.php.bak&#xff0c;直接访问会自动下载.bak备份文件 进行代码…

过去5年,Python生态有什么变化?

你好&#xff0c;我是 EarlGrey&#xff0c;一名双语学习者&#xff0c;会一点编程&#xff0c;目前已翻译出版《Python 无师自通》、《Python 并行编程手册》等书籍。 点击上方蓝字关注我&#xff0c;持续接收优质好书、高效工具和赚钱机会&#xff0c;一起提升认知和思维。 过…

智慧水利整体解决方案:PPT全文43页,附下载

关键词&#xff1a;智慧水利发展前景&#xff0c;智慧水利解决方案&#xff0c;智慧水利建设方案&#xff0c;智慧水利平台系统 一、智慧水利建设背景 传统水利系统存在一些问题&#xff1a; 现有基础感知不能满足更高标准的水利管理需求&#xff1b;决策调度支撑能力亟需加强…

Benchmarking Large Language Models in Retrieval-Augmented Generation-学习翻译

提检索增强生成中大型语言模型的基准测试文献学习 作者将在https://github.com/chen700564/RGB上发布本文的代码和RGB。 y ˇ \check{y} yˇ​ 文章目录 摘要IntroductionRelated workRetrieval-Augmented Generation BenchmarkRAG所需能力数据构建评估指标 ExperimentsSetting…

PCBA表面污染的分类及处理方法

NO.1 引言 在PCBA生产过程中&#xff0c;锡膏和助焊剂会产生残留物质&#xff0c;残留物中包含的有机酸和电离子&#xff0c;前者易腐蚀PCBA&#xff0c;后者会造成焊盘间短路故障。且近年来&#xff0c;用户对产品的清洁度要求越来越严格&#xff0c;PCBA清洗工艺逐渐被电子组…

国际阿里云:无法访问ECS实例中的服务的排查方法!!!

操作场景 无法访问ECS实例中的服务可能有以下原因&#xff1a; 可能原因 排查方案 ECS实例的安全组未开放相应端口 检查ECS实例安全组规则 ECS实例中&#xff0c;该服务未启动/开启或服务对应端口未被监听 检查服务状态及端口监听状态 ECS实例内防火墙设置错误 检查ECS…

Linux下的调试工具——GDB

GDB 1.什么是GDB GDB 是由 GNU 软件系统社区提供的调试工具&#xff0c;同 GCC 配套组成了一套完整的开发环境&#xff0c;GDB 是 Linux 和许多 类Unix系统的标准开发环境。 一般来说&#xff0c;GDB 主要能够提供以下四个方面的帮助&#xff1a; 启动程序&#xff0c;可以按…

FRI的Commit、Query以及FRI Batching内部机制

1. 引言 前序博客见&#xff1a; Reed-Solomon Codes及其与RISC Zero zkVM的关系RISC Zero ZKP协议中的商多项式 FRI用途&#xff1a; 用于证明某vector commitment是&#xff08;接近&#xff09;某Reed-Solomon codeword。即证明某low-degree多项式。 FRI工作原理&#…

时间序列预测实战(十二)DLinear模型实现滚动长期预测并可视化预测结果

官方论文地址->官方论文地址 官方代码地址->官方代码地址 个人修改代码->个人修改的代码已经上传CSDN免费下载 一、本文介绍 本文给大家带来是DLinear模型&#xff0c;DLinear是一种用于时间序列预测&#xff08;TSF&#xff09;的简单架构&#xff0c;DLinear的核…

uni-app点击按钮弹出提示框-uni.showModal(OBJECT),选择确定和取消

参考文档&#xff1a; https://uniapp.dcloud.io/api/ui/prompt?idshowmodal 显示模态弹窗&#xff0c;可以只有一个确定按钮&#xff0c;也可以同时有确定和取消按钮。类似于一个API整合了 html 中&#xff1a;alert、confirm。 uni.showModal({title: 提示,content: 这是一…

【计算机网络笔记】IP分片

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

openssl研发之base64编解码实例

一、base64编码介绍 Base64编码是一种将二进制数据转换成ASCII字符的编码方式。它主要用于在文本协议中传输二进制数据&#xff0c;例如电子邮件的附件、XML文档、JSON数据等。 Base64编码的特点如下&#xff1a; 字符集&#xff1a; Base64编码使用64个字符来表示二进制数据…

Leetcode刷题详解—— 目标和

1. 题目链接&#xff1a;494. 目标和 2. 题目描述&#xff1a; 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 或 - &#xff0c;然后串联起所有整数&#xff0c;可以构造一个 表达式 &#xff1a; 例如&#xff0c;nums [2, 1] &#xff0c;可…

出电子书了!

熟悉小灰的小伙伴们都知道&#xff0c;小灰曾经创作了三本算法有关的图书&#xff0c;分别是《漫画算法》、《漫画算法Python篇》、《漫画算法2》。 如今&#xff0c;这三本书在全网的销量超过10W册&#xff0c;可以说是IT领域最畅销的图书之一。 小灰的这三本算法书&#xff0…

Linux系统编程,Linux中的文件读写文件描述符

文章目录 Linux系统编程&#xff0c;Linux中的文件读写操作1.open函数&#xff0c;打开文件 Linux系统编程&#xff0c;Linux中的文件读写操作 1.open函数&#xff0c;打开文件 我们来看下常用的open函数 这个函数最终返回一个文件描述符struct file 我们查看一下它的Ubuntu…

数据结构之双向链表

目录 引言 链表的分类 双向链表的结构 双向链表的实现 定义 创建新节点 初始化 打印 尾插 头插 判断链表是否为空 尾删 头删 查找与修改 指定插入 指定删除 销毁 顺序表和双向链表的优缺点分析 源代码 dlist.h dlist.c test.c 引言 数据结构…

LeetCode【923】三数之和的多种可能性

题目&#xff1a; 思路&#xff1a; https://www.jianshu.com/p/544cbb422300 代码&#xff1a; int threeSumMulti(vector<int>& A, int target) {//Leetcode923:三数之和的多钟可能//initialize some constint kMod 1e9 7;int kMax 100;//calculate frequenc…

图论12-无向带权图及实现

文章目录 带权图1.1带权图的实现1.2 完整代码 带权图 1.1带权图的实现 在无向无权图的基础上&#xff0c;增加边的权。 使用TreeMap存储边的权重。 遍历输入文件&#xff0c;创建TreeMap adj存储每个节点。每个输入的adj节点链接新的TreeMap&#xff0c;存储相邻的边和权重 …

138.随机链表的复制(LeetCode)

深拷贝&#xff0c;是指将该链表除了正常单链表的数值和next指针拷贝&#xff0c;再将random指针进行拷贝 想法一 先拷贝出一份链表&#xff0c;再对于每个节点的random指针&#xff0c;在原链表进行遍历&#xff0c;找到random指针的指向&#xff0c;最后完成拷贝链表random…