vue2.0中关于在vuex中数据模块化管理实例

1、vue2.x脚手架下载(默认你本地有node和vue)

	cnpm install @vue/cli -g  或者  npm install @vue/cli -g

2、脚手架选项

1)选择自定义

在这里插入图片描述

2)选择需要的

在这里插入图片描述
3) 选择版本
在这里插入图片描述
4) ESlint
在这里插入图片描述
5) eslint检测时机
在这里插入图片描述

正文…

整个目录大概是这样的
在这里插入图片描述
windowInfo.js 为某一个流程的数据管理模块,getters 是负责将modules中的数据进行统一管理后,在store/index.js 中进行注册, 然后在 xxx.vue 文件中 可以通过 mapGetters 进行引用
1、windowInfo.js 文件
在这里插入图片描述
change_number为 xxx.vue文件中通过 this.$store.dispatch(‘change_number’, params) 进行调用,
因为 actions 中的数据是只读的,如果想改变当前模块中的数据,需要通过调用 mutations 中的方法进行更改
2、getters.js 文件(模块化数据统一管理)
在这里插入图片描述
首先 将模块引入, 之后进行统一管理后暴露出去

3、store/index.js (模块进行注册)
在这里插入图片描述
4、调用
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值