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

  • 个人所得税个体户减半
  • 提成过高
  • 所得税税负率的计算公式中营业收入含不含税
  • 低值易耗可以直接入管理费用吗
  • 借款利息支出全部可以税前扣除吗
  • 汇款手续费的会计科目
  • 代理进口业务
  • 自产产品赠送确认收入吗
  • 已抵扣的发票怎么开红字发票申请单
  • 危险废物处理费用发票怎么开
  • 有关增值税期末留抵税额的会计分录
  • 福利费的进项税额转出
  • 携税宝如何网上缴费
  • 进项税额转出是什么意思
  • 增值税进项税抵扣规定
  • 税务稽查的四个环节
  • 社会团体的费用包括哪些
  • 对个体工商户个人的认识
  • 个体工商户的公章丢了怎么办
  • windows更新显示
  • 利润为负数怎么调
  • 公司之间借款怎么操作
  • 原材料暂估入账产生的差异如何处理
  • 幼儿园资金收支管理财务制度
  • 提供给生产工人的住房的租赁费用应计入
  • 发出商品借方余额120000元
  • 单位垫付资金如何做账
  • macOS 11 Big Sur beta 4值得升级吗?macOS 11 Big Sur beta 4更新详解
  • PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
  • 房地产企业所得税预提成本10%
  • 以公允价值计量的投资性房地产
  • 个体户转企业怎么做账
  • 企业所得税季度预缴是什么意思
  • 企业所得税如何更正申报
  • 未确认融资费用报表填在哪个科目
  • python datetime把日期转换字符串
  • 在建工程减值准备借贷方向
  • 礼品赠送纳税标准
  • 销售免税农产品如何开票
  • 织梦怎么套模板
  • mysqldump定时备份
  • 社会保险差额缴纳
  • 补提折旧以前年度损益调整
  • 中标违约保证金怎么退
  • 数量金额式明细账余额怎么填
  • 金蝶暂存凭证怎样转正常凭证
  • 小企业建账选哪种会计制度
  • 公司支票可以进私人账户吗有限额吗
  • 日记账是否必须全部建立
  • mysql 指定my.cnf
  • win8.1怎么改win7系统
  • 电脑爆音卡死
  • windows个性化设置在哪里
  • 鼠标右键一直锁定一个应用
  • linux dd测试
  • putty ssh tunnel
  • 提示explorer.exe
  • linux page buffer cache深入理解
  • oodag.exe - oodag是什么进程 有什么作用
  • win7系统误删文件可以恢复吗
  • linux更新配置
  • javascript中
  • extjs 为某个事件设置拦截器
  • jquery.parsejson
  • linux rsync同步命令(值得收藏)
  • cocos code ide 1.0.0 RC0 使用教程
  • js date用法
  • android系统介绍
  • fiori开发
  • js怎么设置字体
  • html键盘监听
  • python动态加载py
  • python2设置环境变量
  • jquery event
  • android开发框架mvp
  • 供电局发票是什么样子的
  • 西安经开税务局电话号码
  • 注册会计师和注册审计师哪个厉害
  • 个人股权转让是否增值了怎么判断
  • 军人残疾证家属享受待遇吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设