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

news2024/12/23 13:54:18

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 : {
        ......
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android问题笔记四十一:JNI NewStringUTF错误的几种解决方案

点击跳转>Unity3D特效百例点击跳转>案例项目实战源码点击跳转>游戏脚本-辅助自动化点击跳转>Android控件全解手册点击跳转>Scratch编程案例点击跳转>软考全系列 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&…

B站视频下载工具的分享

直接解压使用1.5.9版本的就可以。 资源&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1zWJWzxVss4h2lmMhCFFzDg?pwdw1v8 提取码&#xff1a;w1v8 先解压 解压 双击使用

小白的福利教学。4+共病+WGCNA+机器学习+实验,简单易复现

今天给同学们分享一篇共病WGCNA机器学习实验的生信文章“Exploring immune related gene signatures and mechanisms linking non alcoholic fatty liver disease to atrial fibrillation through transcriptome data analysis”&#xff0c;这篇文章于2023年10月16日发表在Sci…

c++学习MFC还是QT?

c学习MFC还是QT&#xff1f; 建议学习Qt, Qt开发不仅跨平台&#xff0c;而且社区活跃度和网上的资料也比较多一点&#xff0c;特别是跨平台这一点很重要&#xff0c;最近很多小伙伴找我&#xff0c;说想要一些QT资料&#xff0c;然后我根据自己从业十年经验&#xff0c;熬夜搞了…

Proteus仿真--基于51单片机的LED模拟交通灯仿真(仿真文件+程序)

本文主要介绍基于51单片机的LED模拟交通灯仿真&#xff08;完整仿真源文件及代码见文末链接&#xff09; 仿真运行视频 Proteus仿真--基于51单片机的LED模拟交通灯仿真&#xff08;仿真文件程序&#xff09; 附完整Proteus仿真资料代码资料 百度网盘链接: https://pan.baidu.c…

软件测试必问的面试题(答案+文档)

前言 &#xff08;第一个就刷掉一大批人&#xff09; 有很多“会自动化”的同学来咨询技术问题&#xff0c;他总会问到我一些元素定位的问题。元素定位其实都不算自动化面试的问题。 一般我都会问&#xff1a;你是定位不到吗&#xff1f;通常结果都是说确实定位不到。 做自…

视频剪辑高手必学:批量制作画中画效果的秘诀

随着社交媒体的兴起&#xff0c;视频制作越来越受到人们的关注。在视频制作中&#xff0c;画中画效果是一种常见的技术&#xff0c;它能够让多个画面同时出现在屏幕上&#xff0c;增强视频的视觉效果。然而&#xff0c;对于许多初学者来说&#xff0c;制作画中画效果可能是一项…

python会计应用实操-企业收入与发票比对

案例&#xff1a;企业收入与开票 公司月底或一个季度盘点一下&#xff0c;收入账款与开票数额是否匹配。 使用工具&#xff1a;jupter lab和python 数据&#xff1a; 上海电子税务局已开票统计excel表 银行流水单excel表 编程思路&#xff1a; 两个excel对比金额&#x…

4.OsgEarth加载Mbtiles

愿你出走半生,归来仍是少年&#xff01; 1.Mbtiles mbtiles是在GIS开发中最常用的瓦片包格式&#xff0c;在移动端、桌面端都是常用的格式。 2.代码 通过OsgEarth的MBTilesImageLayer图层进行加载&#xff0c;也是封装成了一个静态的方法方便调用。 /// <summary&g…

【ROS入门】机器人导航(仿真)——导航模块概述

文章结构 导航模块简介全局地图自身定位路径规划运动控制环境感知 导航之坐标系坐标系变换 导航模块简介 在ROS中机器人导航(Navigation)由多个功能包组合实现&#xff0c;ROS 中又称之为导航功能包集&#xff0c;关于导航模块&#xff0c;官方介绍如下: 一个二维导航堆栈&…

拥有DOM力量的你究竟可以干什么

如果你希望访问 HTML 页面中的任何元素&#xff0c;那么您总是从访问 document 对象开始&#xff01; 查找HTML元素 document.getElementById(id) 通过元素 id 来查找元素 <!DOCTYPE html> <html> <head><meta charset…

OSPF 的10种网络类型和5种区域类型

10种网络类型&#xff0c;也有称7类的&#xff0c;因为8、9、10类是V3专有的&#xff0c;如下&#xff1a; LSA 类型描述传播范围使用与目的Type 1路由器LSA (Router LSA)区域 (Area)描述路由器连接的直连网络和链路信息&#xff0c;用于建立拓扑图和计算最短路径。Type 2网络…

Nginx性能优化

简介 nginx作为常用的web代理服务器&#xff0c;某些场景下对于性能要求还是蛮高的&#xff0c;所以本片文章会基于操作系统调度以及网络通信两个角度来讨论一下Nginx性能的优化思路。 基于操作系统调度进行Nginx优化 CPU工作方式 对于用户进程&#xff0c;CPU会按照下面的…

10个简单好用的Python装饰器

_装饰器&#xff08;Decorators&#xff09;_是Python中一种强大而灵活的功能&#xff0c;用于修改或增强函数或类的行为。装饰器本质上是一个函数&#xff0c;它接受另一个函数或类作为参数&#xff0c;并返回一个新的函数或类。它们通常用于在不修改原始代码的情况下添加额外…

Linux操作系统概述3——进程相关操作讲解(进程概念、xinetd守护进程、进程管理命令)

目录 进程的概念 程序与进程的关系 进程的分类 守护进程的分类 进程的PID 进程的状态 xinetd 守护进程服务 xinetd基本概念 xinetd工作原理 xinetd相关文件介绍 守护进程的管理命令 chkconfig 命令 service 命令 systemctl命令 查看进程状态相关命令 一般程序处…

CLIP文章精读

核心&#xff1a; loss的设计&#xff1a;分布针对固定image匹配text和固定text匹配image设计了两个交叉熵loss

Spring Boot进阶(89):Spring Boot和Zookeeper搭建分布式系统,提高系统可靠性

&#x1f4e3;前言 在当今信息化时代&#xff0c;互联网公司在面对海量访问请求时往往需要采用分布式系统来提高系统的可扩展性和可靠性。分布式系统具有多节点、相互协作的特性&#xff0c;不仅可以提高系统的吞吐量&#xff0c;而且还能在某个节点出现故障时自动切换到其他节…

APC学习记录

文章目录 APC概念APC插入、执行过程逆向分析插入过程执行过程总结 代码演示参考资料 APC概念 APC全称叫做异步过程调用&#xff0c;英文名是 Asynchronous Procedure Call&#xff0c;在进行系统调用、线程切换、中断、异常时会进行触发执行的一段代码&#xff0c;其中主要分为…

【Bond随你温故Kubernetes之】壹图复盘service与内部通信

最近跟朋友聊到了k8s 我&#xff1a; “环境给了就只管用呗&#xff0c;副本自动管理地妥妥的&#xff0c;有啥可以复盘的&#xff1f;“ 朋友&#xff1a; “容器的通讯与服务暴露还是有点东西的” 我&#xff1a; “嗯&#xff5e;&#xff5e;&#xff08;抿嘴点…

Android S从桌面点击图标启动APP流程 (六)

系列文章 Android S从桌面点击图标启动APP流程 (一)Android S从桌面点击图标启动APP流程 (二) Android S从桌面点击图标启动APP流程 (三) Android S从桌面点击图标启动APP流程 (四) Android S从桌面点击图标启动APP流程 (五) Android 12的源码链接&#xff1a; android 1…