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

  • 预缴增值税的账务
  • 领的增值税专用发票如何录入电脑
  • 小规模租金可以按1%
  • 合并资产负债表和合并利润表的区别
  • 合并两公司的帐务怎么做
  • 工会支出发票抬头是企业名称可以吗
  • 哪些科目需要计提资产减值损失
  • 企业所得税债务重组所得
  • 未分配利润的计税基础是
  • 奖励积分换取商品会计处理
  • 跨省的分公司亏损需要缴纳所得税吗?
  • 停车场吗
  • 外墙装饰公司的资质规定
  • 国家税务总局2011年第25号公告
  • 废旧物资缴纳增值税政策
  • 油类增值税是多少
  • 未分配利润怎么消化掉 避开所得税
  • 退款给客户怎么写分录
  • Uncaught TypeError: XXX is not a function问题解决方法
  • 商会收到的会费要交企业所得税
  • jquery怎么升级
  • php的数组函数
  • 增值税流转税是什么意思
  • 实收资本的会计编码
  • 原材料按实际成本核算需设置的科目包括
  • 给员工报销
  • 我的第一次作文400字左右
  • ai与自动化有什么区别
  • IndexError: invalid index of a 0-dim tensor. Use `tensor.item()` in Python
  • 税务退附加税会计分录
  • 国际货运代理存在的必要性有哪些方面
  • 托收的收款人是谁
  • 判断文件是否存在,存在则删除
  • 风险资本生存概率
  • 养老院筹开计划
  • 在建工程盘盈盘亏的账务处理
  • 企业亏损了
  • 小额支出的两种形式
  • sqlserver数据库事物日志已满
  • 产品的运输费用分录
  • 残保金逾期申报了补报会有罚款和滞纳金吗?
  • 跨年的应收账款多做了怎么做账
  • 押金无法收回账怎么办
  • 未开票收入如何申报
  • 股东借款转为实收资本的说明
  • 员工福利费是不是免税项目
  • 按工人工资比例结转制造费用会计科目
  • 增值税是什么的抵减项目
  • 黄金以旧换新是不是不划算
  • 网上报税零申报流程演示2018
  • 酒店购买的餐具可以退吗
  • 企业建账需做的会计科目
  • mysql中注释
  • mysql8.0二进制安装
  • mysql速成要多久
  • sql server数据库查询语句
  • Linux(Ubuntu)下mysql5.7.17安装配置方法图文教程
  • win10系统怎么看驱动
  • win8系统如何查看电脑mac物理地址
  • Win7系统打开蓝牙
  • centos6开机启动
  • windows7能玩地下城吗
  • linux系统开发环境
  • android app 源码
  • 遮罩层在上还是在下
  • nodejs爬取数据
  • android环境搭建教程
  • linux系统下hosts文件详解及配置
  • perl中use strict
  • java多线程产生死锁
  • javascript例题
  • 安卓通知栏管理工具
  • java中线程池原理
  • 湖北省国家税务总局
  • 购房发票怎么查验
  • 北京交通政务
  • 柴油计入什么科目
  • 税控盘如何分配发票
  • 落地和全包一样吗
  • 出口退税的期限是多长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设