位置: 编程技术 - 正文

深入理解vuex2.0 之 modules(深入理解计算机系统 电子书)

编辑:rootadmin

推荐整理分享深入理解vuex2.0 之 modules(深入理解计算机系统 电子书),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:深入理解新发展理念,推进供给侧结构性改革,深入理解新发展理念,推进供给侧结构性改革,深入理解中国式现代化论文,深入理解中国式现代化论文,深入理解计算机系统,深入理解新发展理念,推进供给侧结构性改革,深入理解计算机系统,深入理解计算机系统,内容如对您有帮助,希望把文章链接给更多的朋友!

什么是module?

背景:在Vue中State使用是单一状态树结构,应该的所有的状态都放在state里面,如果项目比较复杂,那state是一个很大的对象,store对象也将对变得非常大,难于管理。

module:可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

怎么用module?

一般结构

模块内部的数据:①内部state,模块内部的state是局部的,也就是模块私有的,比如是car.js模块state中的list数据,我们要通过this.$store.state.car.list获取;②内部getter、mutation和action,仍然注册在全局命名空间内,这是为了多模块可以同时响应同一mutation;this.$store.state.car.carGetter的结结果是undefined,而通过this.$store.state.carGetter则可以拿到。

传参:getters====({state(局部状态),getters(全局getters对象),roosState(根状态)});actions====({state(局部状态),commit,roosState(根状态)}).

新建一个项目体验一下,通过vue ?cli新建一个项目vuemodule, 不要忘记安装vuex.

1, 在src 目录下新一个login文件夹,在里面新建index.js 用于存放login 模块的状态。 为了简单起见,我把模块下的state, actions,mutations, getters 全放在index.js文件中。

先简单给它增加一个状态,userName: “sam”

2,在src 目录下,再新建一个 store.js 这是根store, 它通过modules 属性引入 login模块。

3, 在main.js中引入store, 并注入到vue 根实例中。

4,在 app.vue 中通过computed属性获取到login下的state. 这里要注意,在没有modules 的情况下,组件中通过 this.$store.state.属性名 可以获取到,但是有modules 之后,state 被限制到login 的命名空间(模块)下,所以属性名前面必须加模块名(命名空间),组件中通过 this.$store.state.模块名.属性名,在这里是 this.$store.state.login.userName

深入理解vuex2.0 之 modules(深入理解计算机系统 电子书)

组件中成功获取到状态。项目目录和展示如下

4 ,通过actions, mutations 改变名字, 这就涉及到dispatch action, commit mutations, mutations 改变state.

先在login 文件夹 index.js中添加changeName action 和 CHANGE_NAME mutations.

在app.vue 中添加一个按钮:<button> change to json</button>, 点击时,dispatch 一个 action. 那在组件中怎么dispatch actions 呢?

在模块中,state 是被限制到模块的命名空间下,需要命名空间才能访问。 但actions 和mutations, 其实还有 getters 却没有被限制,在默认情况下,它们是注册到全局命名空间下的,所谓的注册到全局命名空间下,其实就是我们访问它们的方式和原来没有module 的时候是一样的。比如没有module 的时候,this.$store.dispatch(“actions”), 现在有了modules, actions 也写在了module 下面(changeName 写到了login目录下的index.js中),我们仍然可以这么写,this.$store.dispatch(“changeName”), 组件中的getters, 也是通过 this.$store.getters.module中getters 来获取。

5, 局部参数

虽然dispatch action和 commit mutations 可以全局使用,但是写在module 中的actions, mutations 和getters, 它们获得的默认参数却不是全局的,都是局部的,被限定在它们所在的模块中的。比如mutations和getters 会获得state 作为第一个默认参数,这个state参数,就是限定在mutations 和getters 所在模块的state对象,login 文件夹下的mutations 和getters 只会获取到当前index.js 中的 state 作为参数 。 actions 会获得一个context 对象作为参数,这个context 对象就是当前module 的实例,module 相当于一个小store.

那么怎样才能获取到根store 中的state 和 getters 呢? Vuex 提供了 rootState, rootGetters 作为module 中 getters 中默认参数, actions中context 对象,也会多了两个属性,context.getters, context. rootState, 这些全局的默认参数,都排在局部参数的后面。

我们在store.js中添加 state, getters:

login 目录下的 index.js

app.vue 增加h2 展示 loacaJobTitle, 这个同时证明了getters 也是被注册到全局中的。

6, 其实actions, mutations, getters, 也可以限定在当前模块的命名空间中。只要给我们的模块加一个namespaced 属性:

当所有的actions, mutations, getters 都被限定到模块的命名空间下,我们dispatch actions, commit mutations 都需要用到命名空间。如 dispacth("changeName"), 就要变成 dispatch("login/changeName"); getters.localJobTitle 就要变成 getters["login/localJobTitle"]

app.vue 如下:

有了命名空间之后,mapState, mapGetters, mapActions 函数也都有了一个参数,用于限定命名空间,每二个参数对象或数组中的属性,都映射到了当前命名空间中。

标签: 深入理解计算机系统 电子书

本文链接地址:https://www.jiuchutong.com/biancheng/377403.html 转载请保留说明!

上一篇:AngularJS实现自定义指令及指令配置项的方法(angular script)

下一篇:详解Vue2 SSR 缓存 Api 数据(vue缓存数据)

  • 利润表里面的所得税
  • 什么是销项税额抵减
  • 代扣代缴个人所得税会计分录怎么做
  • 可以抵扣的进项税额是什么意思
  • 生产成本月末有余额怎么结账
  • 投资款转账没备案怎么办
  • 做账一定要银行对账单吗
  • 文化事业建设费怎么申报
  • 豆粕适用税率
  • 滞留票的处理
  • 核定征收可以享受小微企业税收优惠吗
  • 并购重组资产怎么算
  • 先征后返的所得税账务处理
  • 付款时没有发票怎么做账
  • 营改增后开餐厅需要交什么税?
  • 营改增后,房地产开发项目预售价如何申报
  • 广东省电子税务局app下载
  • 增值税专用发票可以开电子发票吗
  • 交上月增值税的凭证
  • 开具红字专票的步骤
  • 会计利润和税务利润的暂时性差异和永久性差异
  • 发票可以开工程款吗
  • 合同取得成本与销售费用
  • 增值税普通发票有什么用
  • 1697510021
  • 小规模纳税人核定征收标准
  • 低值易耗品处理的目的
  • PHP:session_cache_limiter()的用法_Session函数
  • 支付宝语音提示在哪里打开
  • 增值税发票校验码在哪个位置
  • nginx安装配置视频
  • controller控制器怎么调
  • 主播工资不发
  • 什么经营范围可以开门票发票
  • mysql 连接语句
  • 劳务公司属于什么
  • 小规模纳税人都是3%吗
  • 一般纳税人销售旧货税率
  • 存货发出的计价方式有哪些
  • 企业收取的丢失物品
  • 企业破产作用
  • 诉讼费可以退回私账嘛
  • 本年利润为
  • 对以前年度的收入怎么算
  • 免抵退的定义
  • 用友为什么引入不了账套
  • 会计记账中借方和贷方
  • 货币资金核算制度是什么
  • sql server复制数据库的方法
  • win10上如何安装hd4850驱动
  • windowsserver2008r2密码重置
  • ubuntu无法解压tar.gz
  • autorun.dll
  • [下载转存] 经验本题库源文件下载转存 秒结
  • linux vps 教程
  • centos 常用命令教程
  • ctrl+的作用
  • xp开机chkdsk
  • linux wc命令如何实现
  • macbook 苹果系统
  • centos 7 dns
  • w10系统屏幕一直在闪
  • win10桌面是什么样的
  • 有usb3.0驱动的win7
  • unity小技巧
  • unity进度条有百分比代码
  • opengl的坐标系
  • jquery width
  • jquery添加图片
  • 获取已安装应用列表的权限在哪里设置
  • javascript 变量
  • 黑马程序员学费多少钱2018
  • 杭州二套房契税新政策2023年
  • 青春逐梦税务蓝
  • 信息咨询费包括什么费用
  • 金融商品转让都包括什么
  • 建筑工程施工企业资质
  • 增值电信发票
  • 法治税务建设工作思路
  • 亿企代账和云账房哪个好用?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设