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

  • 对方公司为什么一定要专票
  • 小企业如何做帐
  • 增值税进项发票网上勾选平台
  • 全年一次性奖金个税计算
  • 佣金开什么发票内容
  • 500元以下免税发票有哪些
  • 处置固定资产简易征收
  • 注册资金印花税减半政策
  • 收到电子退库的摘要怎么写
  • 外出经营能自带食物吗
  • 免抵退税的计算数据
  • 工业企业提供劳务收入会计分录
  • 委托加工消费税纳税义务发生时间
  • 进项税超期怎么办
  • 个人互换住房土地增值税
  • 收到别人的承兑怎么入账
  • 企业所得税一般是几个点
  • 小规模纳税人不开票收入填在哪里
  • 小规模税收减免
  • linux ctrl c和ctrl z
  • 服务器ssl证书过期怎么解决
  • 银行余额调节表的作用
  • 在建工程变更建设单位
  • php parse_url
  • 内置管理员无法打开此应用
  • winrar压缩后生成的文件格式
  • ·exe是什么文件
  • macos如何备份
  • 苹果14pro真实图片发朋圈
  • 电脑文件删除如何找到
  • vue实现打印
  • 生产性生物资产折旧计入什么科目
  • 纽约公共图书馆开放时间
  • 框架如何使用
  • 隐藏index.html
  • html在线小游戏
  • 终于见识到什么叫云横秦岭了
  • 现金流量表中有应收账款吗
  • 企业的对公账户怎么办理
  • 送货单收据怎么写
  • sqlserver2008安装步骤图文
  • 合作社分红计入什么科目
  • 股东以固定资产入股会计处理
  • 企业中间投入
  • 递延收益为什么不影响利润总额
  • 会计中制造费用包括哪些内容
  • 开出地税发票(工程款)怎么做账?
  • 房地产经纪公司排名
  • 帮员工代缴社保分录怎么办
  • 以前年度损益调整怎么做账
  • 新单位怎么建账
  • windows server 2008 r2安装教程
  • linux修改yum
  • mac系统如何安装双系统
  • autorun.dll
  • Win10 Mobile RS2预览版14926升级错误代码800703ed的解决方法
  • reg.exec
  • Win7 64位旗舰版设置字体显示比例让字体变大
  • win7系统无法进入登录界面
  • windows7的开机启动项在哪里
  • win7宽带连接错误813怎么解决办法
  • win7网上邻居怎么共享文件数据
  • ghost10008解决办法
  • Jquery ajax加载等待执行结束再继续执行下面代码操作
  • jquery 回车
  • 如何用python画花瓣
  • js 上传
  • jQuery 实现ajax传入参数含有特殊字符的方法总结
  • python文件a
  • android studio教程入门
  • python设计gui
  • android 图片视频轮播框架
  • jquery dom对象
  • js数组的push方法
  • jquery找父级
  • python import ssl
  • 个人所得税预扣预缴办法
  • 党和国家为什么重视三农问题
  • 乾隆年间财政收入统计表
  • 季度申报忘了报怎么办
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设