位置: 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实战)

  • 职工福利费会计凭证
  • 税控盘如何看是否反写成功
  • 所得税费用期初有余额吗
  • 应付职工薪酬纳税调整比例
  • 企业存货实际成本的构成包括
  • 长期待摊费用属于无形资产吗
  • 员工离职如何申请赔偿
  • 固定资产折旧摊销表A105080
  • 年化收益率和年利率的区别的例子
  • 建筑业预交税金怎么计算
  • 暂估的成本跨年了怎么冲销后要调整报表吗
  • 商场积分兑换现金怎么用
  • 租的办公室要交税么
  • 购货方申请红字信息表,销售方不开会怎么样
  • 增值税普通发票怎么开
  • 2020水利基金
  • 政府专项补助如何处理
  • 个人所得税app入职时间不对
  • 公司参展费取得发票怎样做账?
  • 固定资产清理账户结构
  • 小型微利企业的企业所得税优惠政策
  • 未做账务处理
  • 个体工商户给员工交社保属于职工社保吗
  • win101703怎么看
  • 技术咨询服务费计入什么科目
  • 金税盘可以抵扣进项税吗
  • 装win7ahci
  • 子公司转为分公司,是不是需要缴纳土地增值税
  • php上传文件参考文件类型
  • downloadplus.exe是什么进程 作用是什么 downloadplus进程是安全的吗
  • 命令行wifi
  • 政府性基金收入是政府非税收入吗
  • 电商平台第三方服务
  • 出租其取得的不动产是什么意思
  • 不能加载axf文件
  • 系统win7旗舰版
  • php返回值
  • 公司土地被政府占用
  • npm无法将npm项识别为
  • 出口销售折扣怎么处理
  • 金融机构拆出资金的最长期限
  • python输入三科成绩
  • 对方不给开发票做账可以直接出费用吗?
  • 给客户的现金奖励会计处理
  • sqlserver 通用存储过程分页代码(附使用ROW_NUMBER()和不使用ROW_NUMBER()两种情况性能分析)
  • 小规模纳税人适用什么会计准则
  • 员工欠薪怎么办
  • 高危险工作人员有什么意外险
  • 未拿到发票如何处理
  • 自产产品用于不动产
  • 销售佣金?
  • 出口单证不齐责令整改可以处
  • 赡养老人扣除标准个税
  • mysql批量删除数据库死锁
  • mmc不能打开文件win10
  • win8玩英雄联盟fps低怎么办
  • Ubuntu Server Rsync服务端与Windows cwRsync客户端实现数据同步配置教程
  • centos6.5查看cpu信息
  • winxp系统占用c盘多少
  • ubuntu20关机卡在logo
  • linux如何加载动态库
  • win8.1c盘满了怎么办
  • win10各个版本的桌面
  • win7系统鼠标指针形状介绍
  • unity 虚拟摇杆
  • 苏州大学附属第一医院占地面积
  • jquery each return
  • nodejs实现HTTPS发起POST请求
  • win10安装node.js
  • node.js详解
  • java中的多态性
  • 深入理解新发展理念
  • java script入门
  • 带领大家学习javascript基础篇(一)之基本概念
  • 面向对象的基础知识
  • 文化事业建设税减免政策2023
  • 农业方面有哪些专业
  • 公司注册后多久要去税务局登记
  • 简述绩效信息的收集原则
  • 广东省东莞市电子税务局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设