位置: 编程技术 - 正文

深入理解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缓存数据)

  • 资源税的计税依据含增值税吗
  • 注册资本印花税减半征收政策
  • 计提利息要计提手续费吗
  • 本月销售商品的实际成本怎么算
  • 劳务发票打款用途写什么
  • 小规模纳税人残保金
  • 上年度职工月平均工资是税前还是税后
  • 或有负债在报表附注哪里
  • 半成品委托加工费计入成本还是费用
  • 代缴税款是什么意思
  • 开立基本账户所需资料
  • 单位租个人房屋怎么开票
  • 装修工程分期开票分期付款如何作账?
  • 工业企业电费出售会计分录怎么写?
  • 分支机构的企业所得税申报流程是什么
  • 印花税是按照含税收入乘以印花税税率吗
  • 月销售额小于10万的一般纳税人减免
  • 上年工资计提多了才发现
  • 分公司需要核准名称吗
  • Windows10如何修复引导
  • 企业办税人员是干嘛的
  • 应付工资薪酬期末应该为0吗
  • puppetm
  • 增值税中非经营活动包括哪些
  • 公司未经营需要做所得税年度清缴吗
  • 财务会计制度备案信息有效期起止怎么填
  • php自定义表单系统
  • 金蝶专业版怎么用
  • 小微企业免教育附加
  • 什么行业需要生产许可
  • 跨年度费用发票还可以抵扣所得税吗
  • 基于MATLAB的车牌识别
  • chatGPT之Python API启用上下文管理
  • php 输出
  • 出口退税退运费的税吗
  • 帝国cms图片显示不了
  • 报关单运费cny
  • 租赁发票的租赁日期怎么写
  • 大型广告牌制作材料
  • python slic
  • 专利费用计入什么会计科目
  • 增值税专用发票和普通发票的区别
  • 无形资产的税收优惠政策
  • 购入需安装设备的会计分录
  • 临时售楼处需要什么手续
  • 退休人员基本养老金计发表
  • 工会账户收到经费的会计科目
  • 没签劳动合同的后果
  • 存根联明细怎么申报
  • 旅游团建费用会计怎么入账
  • 固定资产清理的税率是多少
  • 资产负债表与利润表的勾稽关系公式
  • 咨询服务费开票税率
  • 企业预算如何编制
  • 公对私 预付款 税
  • sqlserver数据库定时任务
  • mac app store打开一片空白
  • 设置u盘为只读
  • autorun.dll
  • redhat下载教程
  • RadioSvr.EXE - RadioSvr是什么进程 有什么用
  • win10教育系统
  • html的基本语法规则
  • Intermediate Unity 3D for iOS: Part 2/3
  • 常用服务器配置
  • javascript 基础篇1 什么是js 建立第一个js程序
  • Rotate object with mouse click or touch in Unity3D
  • shader能做什么
  • javascript的dom操作
  • jQuery轻松实现表格的隔行变色和点击行变色的实例代码
  • android底部弹出页面
  • 上海网上纳税申报流程
  • 深圳市福田区税务局电话
  • 个人所得税对什么征税
  • 青岛税税通怎么切换企业
  • 三方协议暂不支持缴款
  • 南通国税电子税务局
  • 动员讲话简短精辟
  • 如何推进社会治理
  • 手表关税税率一般是多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设