Vuex模块化(modules)与namespaced(命名空间)的搭配

Vuex模块化(modules)与namespaced(命名空间)的搭配

Vuex模块化(modules)格式

  • 原理:可以对Vuex的actions,mutations,state,getters四个属性综合成一个部分,做成一个模块使用
  • 优点:可以将一些特殊的功能独立,进行调用
// store.js文件
const a = {
    actions : {
        方法名(context, value){
            ......对value的操作
            context.commit('mutations方法名', value)
        }
    },
    mutations : {
        方法名(state, value){
            ......对state更新,并赋值给value
        }
    },
    state : {
        对象名 : 100
    },
    getters : {
        方法名(state){
            return ......
        }
    }
}

export default new Vuex.Store({
    modules : {
        // 以下两种方法都行
        // 这个地方的写法是根据components组件的方式
        aModule : a
        // 也可以直接写成以下形式,跟 a : a 一样的效果
        a
    }
})

namespaced(命名空间)用法

  • 功能:用来控制dispatch和commit的全访问能力

注意点1:模块区分

  • 在模块化的基础上,对于dispatch或者是commit在调用时需要做好命名空间(namespaced)
    • 原因:在没有做模块化处理的时候,通过dispatch或者是commit调用时,是将一整个文件进行搜索,找寻与之对应的方法名。(做个小实验,如下)
// A.vue
<template>
    <div>
        <button @click="A1">A1 BUTTON</button>
    </div>
</template>

<script>
    export default {
        name : 'A',
        methods : {
            A1(){
                this.$store.dispatch('A1')
            }
        }
    }
</script>
// store.js文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const a = {
    actions : {
        A1(){
            console.log('A1 actions');
        }
    }
}

const b = {
    actions : {
        A1(){
            console.log('B1 actions');
        }
    }
}

export default new Vuex.Store({
    modules : {
        aModule : a,
        bModule : b,
    }
})
  • 以上store.js文件中,分别定义了a和b模块,在两个模块的actions中都有A1方法,执行效果如下:

在这里插入图片描述

  • 点击A1按钮,都触发了a和b模块中的A1方法。当我们只需要执行一个模块的时候,就可以使用命名空间(namespaced),在模块中的第一行加上namespaced : true,可以防止一次性全部访问到
// store.js文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const a = {
    namespaced : true,
    actions : {
        A1(){
            console.log('A1 actions');
        }
    }
}

const b = {
    namespaced : true,
    actions : {
        A1(){
            console.log('B1 actions');
        }
    }
}

export default new Vuex.Store({
    modules : {
        aModule : a,
        bModule : b,
    }
})

在这里插入图片描述

注意点2:使用namespace模块区分后,在xxx.vue调用模块方法上要做出的改变

  • state:
    • 没有namespace:{{$store.state.对象名}}
    • 用了namespace:{{$store.state.模块名.对象名}}
  • actions:
    • 没有namespace:this.$store.dispatch(‘actions方法名’, 值)
    • 用了namespace:this.$store.dispatch(‘模块名/actions方法名’, 值)
  • mutations:
    • 没有namespace:this.$store.commit(‘mutations方法名’, 值)
    • 用了namespace:this.$store.commit(‘模块名/mutations方法名’, 值)
  • getters:
    • 没有namespace:{{$store.getters.getters方法名}}
    • 用了namespace:{{$store.getters[‘模块名/getters方法名’]}}
// xxx.vue
<template>
    <div>
        <h3>state:{{$store.state.aModule.对象名}}</h3>
        <h3>getters:{{$store.getters['aModule/getters方法名']}}</h3>
    </div>
</template>

<script>
    export default {
        name : 'xxx',
        methods : {
            方法名(){
                this.$store.dispatch('aModule/actions方法名',)
            },
            方法名(){
                this.$store.commit('aModule/mutations方法名',)
            }
        }
    }
</script>
// store.js文件
const a = {
    namespaced : true,
    actions : {
        方法名(context, value){
            ......对value的操作
            context.commit('mutations方法名', value)
        }
    },
    mutations : {
        方法名(state, value){
            ......对state更新,并赋值给value
        }
    },
    state : {
        对象名 : 100
    },
    getters : {
        方法名(state){
            return ......
        }
    }
}

const b = {跟上面一样}

export default new Vuex.Store({
    modules : {
        // 以下两种方法都行
        // 这个地方的写法是根据components组件的方式
        aModule : a
        // 也可以直接写成以下形式,跟 a : a 一样的效果
        a
    }
})

导入导出式模板(简洁)

  • 将定义好的模块,封装在一个js文件中
// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 改成导入
import aModule from './a'

export default new Vuex.Store({
    modules : {
        aModule
    }
})
// a.js导出
export default {
    namespaced : true,
    actions : {
        ......
    },
    mutations : {
        ......
    },
    state : {
        ......
    },
    getters : {
        ......
    }
}

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

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

相关文章

假如我有一台服务器,我会让它提供三种服务

一、提供照片上传、存储和下载服务 随着移动互联网时代的持续快速发展&#xff0c;PC互联网日益势微&#xff0c;各大互联网门户网站的博客、空间也跟着凋零&#xff0c; 作为博客、空间的标配功能的相册也随之被关闭。 2019年3月6日网易相册发布停运公告并于当年5月8日正式停…

【Android】Android Framework系列---CarPower电源管理

Android Framework系列—CarPower电源管理 智能座舱通常包括中控系统、仪表系统、IVI系统 、后排娱乐、HUD、车联网等。这些系统需要由汽车电源进行供电。由于汽车自身的特殊供电环境&#xff08;相比手机方便的充电环境&#xff0c;汽车的蓄电池如果没有电是需要专业人士操作…

【观察】Dell APEX云平台:引领多云时代上云新范式

毫无疑问&#xff0c;过去十多年是云计算发展的黄金十年&#xff0c;云计算理念不断被市场所接受&#xff0c;但随着企业上云深入和认知度的不断增加&#xff0c;摆在很多企业面前的选择题也发生了新变化&#xff0c;即从过去企业上云或不上云的纠结&#xff0c;转变成今天如何…

【数据结构练习题】删除有序数组中的重复项

✨博客主页&#xff1a;小钱编程成长记 &#x1f388;博客专栏&#xff1a;数据结构练习题 &#x1f388;相关博文&#xff1a;消失的数字 — 三种解法超详解 删除有序数组中的重复项 1.&#x1f388;题目2. &#x1f388;解题思路3. &#x1f388;具体代码&#x1f387;总结 1…

【Spring】Spring MVC请求响应

文章目录 1. 请求1.1 传递单个参数1.2 传递多个参数1.3 传递对象1.4 后端参数重命名1.5 传递数组1.6 传递集合1.7 传递JSON对象1.8 获取URL中参数1.9 上传⽂件1.10 获得Cookie1.11 获得Session1.12 获得Header 2. 响应2.1 返回静态界面2.2 返回数据2.3 返回HTML代码片段2.4 返回…

前端Vue页面中如何展示本地图片

<el-table :data"tableData" stripe style"width: 100%"><el-table-column prop"imgUrl" label"图片"><template v-slot"scope"><img :src "http://localhost:8888/image/ scope.row.imgUrl&qu…

基于springboot实现网吧管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现网吧管理系统演示 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#x…

2023上半年系统集成项目管理工程师下午真题

文章目录 一&#xff1a;第5章 项目立项管理。第7章 项目范围管理&#xff0c;需求文件二&#xff1a;第9章 项目成本管理。第8章 项目进度管理&#xff0c;压缩工期三&#xff1a;第15章 信息&#xff08;文档&#xff09;和配置管理四&#xff1a;第18章 项目风险管理&#x…

【Java 进阶篇】Java Request 请求转发详解

在Java Web开发中&#xff0c;请求转发&#xff08;Request Forwarding&#xff09;是一种常见的技术&#xff0c;用于将请求从一个Servlet转发到另一个Servlet或JSP页面。这种技术在Web应用程序中起着非常重要的作用&#xff0c;可以用于实现模块化、重用代码以及构建更加灵活…

多输入多输出 | Matlab实现k-means-LSTM(k均值聚类结合长短期记忆神经网络)多输入多输出组合预测

多输入多输出 | Matlab实现k-means-LSTM&#xff08;k均值聚类结合长短期记忆神经网络&#xff09;多输入多输出组合预测 目录 多输入多输出 | Matlab实现k-means-LSTM&#xff08;k均值聚类结合长短期记忆神经网络&#xff09;多输入多输出组合预测预测效果基本描述程序设计参…

设计模式(19)命令模式

一、介绍&#xff1a; 1、定义&#xff1a;命令模式&#xff08;Command Pattern&#xff09;是一种行为设计模式&#xff0c;它将请求封装为一个对象&#xff0c;从而使你可以使用不同的请求对客户端进行参数化。命令模式还支持请求的排队、记录日志、撤销操作等功能。 2、组…

Ubuntu 23.10(Mantic Minotaur)正式发布,支持Linux 6.5和GNOME 45

导读Canonical 近日正式发布了 Ubuntu 23.10&#xff08;Mantic Minotaur&#xff09;操作系统&#xff0c;其中包含一些最新的 GNU/Linux 技术、改进的硬件支持以及许多其他变化。 Ubuntu 23.10 采用了最新的 Linux 6.5 内核系列&#xff0c;并为 Ubuntu 桌面和服务器增强了 z…

BI是什么?想要了解BI需要从哪些方面入手?

企业为了执行数字化战略&#xff0c;实行数字化转型&#xff0c;实现数据价值&#xff0c;除了需要相关数字化技术及理念、人才等&#xff0c;还需要借助数字化相关应用&#xff0c;例如商业世界中广受企业欢迎的ERP、OA、CRM等业务信息系统&#xff0c;以及上升势头非常迅猛的…

Powershell脚本自动备份dhcp数据库

文章目录 为什么要备份DHCP数据库呢&#xff1f;在PowerShell中自动备份DHCP数据库1&#xff0c;创建备份目录2&#xff0c;判断备份路径是否存在3&#xff0c;备份DHCP数据库4&#xff0c;完整自动备份脚本5&#xff0c;安排定期备份 推荐阅读 为什么要备份DHCP数据库呢&#…

红队专题-从零开始VC++C/S远程控制软件RAT-MFC-屏幕监控

红队专题 招募六边形战士队员[24]屏幕监控-(1)屏幕查看与控制技术的讲解图像压缩算法图像数据转换其他 [25]---屏幕监控(2)查看屏幕的实现 招募六边形战士队员 一起学习 代码审计、安全开发、web攻防、逆向等。。。 私信联系 [24]屏幕监控-(1)屏幕查看与控制技术的讲解 屏幕…

CV计算机视觉每日开源代码Paper with code速览-2023.10.27

精华置顶 墙裂推荐&#xff01;小白如何1个月系统学习CV核心知识&#xff1a;链接 点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【基础网络架构&#xff1a;Transformer】&#xff08;Ne…

前端实现埋点监控

前端实现埋点&监控 实现埋点功能的意义主要体现在以下几个方面&#xff1a; 数据采集&#xff1a;埋点是数据采集领域&#xff08;尤其是用户行为数据采集领域&#xff09;的术语&#xff0c;它针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。通过埋…

附录B 其他第三方软件移植(FTP、OpenSSH、GDB)

目录 开发板 FTP 服务器移植与搭建vsftpd 源码下载vsftpd 移植vsftpd 服务器测试配置vsftpd添加新用户Filezilla 连接测试 开发板 OpenSSH 移植与使用OpenSSH 简介OpenSSH 移植OpenSSH 源码获取移植zlib 库移植openssl 库移植openssh 库 openssh 设置openssh 使用ssh 登录scp 命…

利用Excel支持JUnit参数化测试

在JUnit里面&#xff0c;可以使用CsvFileSource读取csv文件进行参数化测试&#xff0c;可是CSV文件不支持格式&#xff0c;编辑颇为麻烦&#xff0c;尤其是多次编辑&#xff0c;因此自然想到是否可以使用Excel文件&#xff0c;可以有各种格式&#xff0c;支持各类数据。 最新开…

常见面试题-MySQL专栏(一)

为什么 mysql 删了行记录&#xff0c;反而磁盘空间没有减少&#xff1f; 答&#xff1a; 在 mysql 中&#xff0c;当使用 delete 删除数据时&#xff0c;mysql 会将删除的数据标记为已删除&#xff0c;但是并不去磁盘上真正进行删除&#xff0c;而是在需要使用这片存储空间时&…