位置: IT常识 - 正文

【vue】vuex中modules的基本用法(vuex model)

编辑:rootadmin
【vue】vuex中modules的基本用法

推荐整理分享【vue】vuex中modules的基本用法(vuex model),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue modal,vuex moudle,vue module,vuex model,vuex moudle,vuex中的module,vuex moudles,vuex moudles,内容如对您有帮助,希望把文章链接给更多的朋友!

1,什么时候用modules

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。 为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割 在模块中使用:namespaced: true, 命名空间,添加之后,当前模块下的标识符可以和其它模块相同,用于解决不同模块的命名冲突问题

2,store文件结构

3.1 index.js中手动引入modules

import Vue from 'vue'import Vuex from 'vuex'import bus from './modules/bus'import app from './modules/app'const path = require('path')Vue.use(Vuex)let store = new Vuex.Store({ state: { }, mutations: { }, actions: { }, modules: { namespaced: true, app, bus }});export default store

3.2 index.js 中动态引入modules

import Vue from 'vue'import Vuex from 'vuex'const path = require('path')Vue.use(Vuex)const files = require.context('./modules', false, /\.js$/)let modules = {}files.keys().forEach(key => { let name = path.basename(key, '.js') modules[name] = files(key).default || files(key)})let store = new Vuex.Store({ state: { }, mutations: { }, actions: { }, modules});export default store

4,app.js 文件中代码

let user = { namespaced: true, state: {}, mutations: { setUser(state, val) { state.user = val; } }, getters: {}, actions: { setName(state, val) { return new Promise(resolve => { setTimeout(function () { state.user = val; resolve(state.user); }, 2000) }) } }}export default user;

 5,配置main.js,挂载store

new Vue({ el: '#app', router, store, components: { App: App }, template: '<App/>'})【vue】vuex中modules的基本用法(vuex model)

6,vue中使用

// commit 执行mutations里的方法,同步操作 this.$store.commit('app/setUser', {name: '张三'}); console.log(this.user.name); // dispatch 执行actions里的方法,异步操作 this.$store.dispatch('app/setName', {name: '李四'}).then(res => { console.log(res.name); })

7,js中使用

// 引入 这里的store 就相当于页面中的 this.$storeimport store from '@/store'export const setCurUser = (user) => { let curUser = store.app.user if(!curUser) { store.commit("app/setUser", user) return user } return curUser}

注意:

1,vue和vuex的版本搭配

vue2使用vuex3;vue3使用vuex4. 否则会出现this.$store为undefined错误

延伸:

1,vuex的五种状态 state、getter、mutation、action、module

state:所有共享数据统一放到state中,与data类似

mutation: 类似于事件,用于改变状态

action: 和mutation相似,但是action是异步操作

getter: 类似vue中的computed,进行缓存,形成新的数据

modules: 分模块,大型项目一个对象管理会很臃肿

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

上一篇:五-2、vue中引用文件路径问题(vue引用类型)

下一篇:【uniapp】 的事件处理详解(uniapp实战)

  • 淘宝网店推广方法与营销技巧有哪些??(淘宝网店推广方法)

    淘宝网店推广方法与营销技巧有哪些??(淘宝网店推广方法)

  • 爱奇艺小窗口播放怎么设置大小(爱奇艺小窗口播放怎么关闭)

    爱奇艺小窗口播放怎么设置大小(爱奇艺小窗口播放怎么关闭)

  • vivos6电池不耐用(vivox6sa电池不耐用)

    vivos6电池不耐用(vivox6sa电池不耐用)

  • 移动的魔百盒可以换地方用吗(移动的魔百盒可以投屏吗?)

    移动的魔百盒可以换地方用吗(移动的魔百盒可以投屏吗?)

  • 联发科mt6771v等于骁龙多少(联发科mt6775)

    联发科mt6771v等于骁龙多少(联发科mt6775)

  • 离线请留言是退出登录吗(离线请留言是退出登录了吗)

    离线请留言是退出登录吗(离线请留言是退出登录了吗)

  •   卖家拒绝退款买家超时未处理(卖家拒绝退款)

      卖家拒绝退款买家超时未处理(卖家拒绝退款)

  • 在中文windows中,中英文之间如何切换(在中文windows中,使用软键盘输入特殊符号)

    在中文windows中,中英文之间如何切换(在中文windows中,使用软键盘输入特殊符号)

  • ipad屏幕比例(ipad屏幕比例显示设置)

    ipad屏幕比例(ipad屏幕比例显示设置)

  • 快手拉黑对方有提示吗(快手拉黑对方有什么作用)

    快手拉黑对方有提示吗(快手拉黑对方有什么作用)

  • 为什么微信语音不能转文字(为什么微信语音声音很小)

    为什么微信语音不能转文字(为什么微信语音声音很小)

  • 手机电池的电压是几伏(智能手机电池的电压)

    手机电池的电压是几伏(智能手机电池的电压)

  • 在windows7操作系统中,ctrl+c是什么命令的快捷键(在windows7中操作具有)

    在windows7操作系统中,ctrl+c是什么命令的快捷键(在windows7中操作具有)

  • heliop70处理器相当于骁龙多少(heliop70处理器相当于苹果)

    heliop70处理器相当于骁龙多少(heliop70处理器相当于苹果)

  • 已移除蜂窝移动号码什么意思(已移除蜂窝移动怎么恢复)

    已移除蜂窝移动号码什么意思(已移除蜂窝移动怎么恢复)

  • 朋友圈不能发视频怎么回事(朋友圈不能发视频怎么发)

    朋友圈不能发视频怎么回事(朋友圈不能发视频怎么发)

  • 笔记本怎么强制关机(笔记本怎么强制关机重启)

    笔记本怎么强制关机(笔记本怎么强制关机重启)

  • 戴尔i5与i7的区别(戴尔i7和i5有什么区别)

    戴尔i5与i7的区别(戴尔i7和i5有什么区别)

  • 手机ip相同是什么意思(手机ip地址一样说明什么原因)

    手机ip相同是什么意思(手机ip地址一样说明什么原因)

  • 怎样升级emui10(怎样升级客户端到最新版本)

    怎样升级emui10(怎样升级客户端到最新版本)

  • 内存卡是外置sd卡吗(内存卡是外存吗)

    内存卡是外置sd卡吗(内存卡是外存吗)

  • 淘金币明细在哪里(淘金币使用记录)

    淘金币明细在哪里(淘金币使用记录)

  • 拼多多为什么不出评价(拼多多为什么不能用支付宝)

    拼多多为什么不出评价(拼多多为什么不能用支付宝)

  • 虎牙号在哪看(虎牙在哪看虎牙号)

    虎牙号在哪看(虎牙在哪看虎牙号)

  • x23怎么返回(x23手机怎么设置返回键)

    x23怎么返回(x23手机怎么设置返回键)

  • threeJs入门 js引入(threejs怎么用)

    threeJs入门 js引入(threejs怎么用)

  • 【学姐面试宝典】前端基础篇Ⅳ(JavaScript)(学长学姐面试要注意哪些细节)

    【学姐面试宝典】前端基础篇Ⅳ(JavaScript)(学长学姐面试要注意哪些细节)

  • 织梦自定义PHP页面让模板支持调用标签(织梦怎么新建页面)

    织梦自定义PHP页面让模板支持调用标签(织梦怎么新建页面)

  • 土地出让金印花税计税依据
  • 期末有留底税额可需要进行账务处理
  • 律师事务所的所训
  • 企业土地使用税征收标准
  • 收到商业承兑汇票到期,向银行办妥有关入账手续
  • 收据能入账抵税吗
  • 销售人员的福利项目包含什么
  • 小规模普票专票税率一样吗
  • 销售货物未开发怎么处理
  • 材料委托加工
  • 接收抵债资产税费
  • 一般借款资本化加权平均数
  • 库存方面的会计是做什么的
  • 调整增值税误差的原因
  • 定额材料损耗率国家标准
  • 出口收入没有及时申报怎么处罚
  • 公司对外投资是股东会还是董事会
  • 固定资产后续支出的确认和处理
  • 品质问题扣供应商款
  • 工程款开票后增值税怎么做分录?
  • 印花税资产划转
  • 汇总缴纳增值税如何申报
  • 固定资产评估费计入什么会计科目
  • 定期定额征收适用范围
  • 年底分红如何计税
  • 个人出租车辆给公司个人所得税
  • 工程筹建期间发票怎么开
  • 预付卡销售怎么做账
  • 企业旅行社名字怎么取
  • 有营业执照是否可以领失业金
  • 企业送礼怎么办
  • 经营租赁与融资租赁的含义
  • PHP:session_set_save_handler()的用法_Session函数
  • 对公账户转私人账户有限额吗
  • 代理的认定
  • 计提折旧和计提减值
  • gain_trickler_3202.exe 进程查询 gain_trickler_3202进程是什么文件
  • 实收资本与注册资本之间的关系
  • php ladp
  • vue能实现什么
  • 视频监控接入方式有哪几种
  • function函数的定义
  • 图幅翻译
  • 35.JavaScript对象和数组的解构赋值基础详解、let陷阱、函数参数解构
  • 发票 加工费
  • 出口货物视同内销征税的会计核算?
  • 土石方工程的税费缴纳方法
  • 外管证异地预缴税款是什么意思
  • 收到境外服务费会计分录
  • 企业的管理费用,财务费用和销售费用计不计成本呢
  • 员工福利开的专票怎么做分录
  • 无形资产摊销完以后得账务处理
  • 我国会计准则规定企业的会计核算基础是
  • 汇算清缴补交的所得税怎么记帐
  • 一般纳税人进项票是普票可以抵扣吗
  • 发行价格另支付发行费用
  • 资金账簿的计税依据
  • 费用报销单怎么写 样本图片
  • 什么是结构性存款基金
  • 建筑企业材料费能否加计扣除
  • 公司买支票需要带什么资料
  • 债务重组的适用范围
  • mysql 模型
  • mysql 注入漏洞
  • win7电脑初始化
  • window7激活系统
  • WIN7快捷键冲突怎么解决
  • linux必学的60个命令rar
  • js匿名函数作用域
  • awk实现wc功能
  • css做一个好看的网页
  • android真机调试闪退
  • js控制鼠标位置
  • junit 原理
  • js中的set
  • Android Design Support Library
  • 绿化项目利润
  • 厦门增值税发票查验
  • 安徽省电子税务局怎么添加办税人员
  • 山东威海文登宋村镇有哪些村
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设