网站首页 > 技术文章 正文
Vuex
概念
为Vue.js程序开发的一套状态管理器
State
项目的数据源,整个项目的状态都保存在state里面。
state:{
number:123,
name:'bulang',
sex:'boy',
infos:[{
name:'kaisa',
sex:'boy'
},{
name:'jiecaowa',
sex:'girl'
}]
},
复制代码
组件中获取state的方法:
- this.$store.state.key
- 使用辅助函数mapState()把state里面的值映射为组件的计算属性并展开,在组件的模板里面便可以直接使用: computed:{ ...mapState(['key']), } 复制代码
Mutation
提交mutation是唯一可以改变state的方法;
第一个参数为state,第二个参数为自定的参数payload;
使用同步方式操作state,否则由于异步数据无法追踪导致devtools记录的历史快照会出问题;
// 例:
mutations:{
add:(state, payload)=>{
state.number+=payload.gap;
},
reduce:(state, payload)=>{
state.number-=payload.gap;
}
}
复制代码
组件中提交mutation的方法:
- this.$store.commit('add',{gap:5})
- 使用辅助函数mapMutations()把对应的mutaions映射到组件的methods里面并展开,在组件的模板里面便可以直接使用: // 例 import { mapMutations } from 'vuex'; export default { name:"active", methods: { ...mapMutations(['add', 'reduce']) }, } 复制代码
Action
主要作用:执行异步操作(如:接口请求等)并提交mutaion;
- 第一个参数为与Store实例一样具有相同方法的context对象,可以通过解构的方式获取对象上的方法;
- 第二个参数为自定义传的值;
- actions之间可以互相派发;
// 例:
actions:{
toLog:({dispatch}, msg)=>{
dispatch('promiseLog',msg).then(()=>{
console.log('success');
}).catch(()=>{
console.log('error');
})
},
promiseLog:({commit},msg)=>{
return new Promise((resolve, reject)=>{
const i = ~~(Math.random()*10);
console.log(i)
if(i<5){
commit('log',msg)
resolve();
}else{
reject();
}
});
}
},
复制代码
在组件中派发actions的方法:
- this.$store.dispatch('toLog','yes')
- 使用辅助函数mapActions()把actions映射到组件的methods里面,然后在组件的模板里面直接调用 // 例: import { mapActions } from 'vuex'; export default { name:"active", methods: { ...mapActions(['toLog']) }, } 复制代码
Getter
主要作用:对state数据进行加工,用来派生新的状态
- 第一个参数为state用来提供数据;
- 第二个参数可以传入其他的getters,使用其他getter加工后的数据;
- 可以在getter中返回一个函数,这样我们在使用的时候就可以传递参数,根据参数来决定返回的数据;
// 例:
getters:{
getInfo:state=>{
return `my name is ${state.name}, ${state.sex}`;
},
getCustomInfo:state => index => {
return `my name is ${state.infos[index]['name']}, ${state.infos[index]['sex']}`;
}
}
复制代码
在组件中使用getters
- this.$store.getters.getInfo
- 使用辅助函数mapGetters把getter映射到组件的computed里面,然后在组件模板中直接使用; // 例: import { mapGetters } from 'vuex' export default { name:'show', computed:{ ...mapGetters(['getInfo', 'getCustomInfo']) } } 复制代码
Module
当项目足够大的时候,所有的state,mutaions,actions,getters放到一个文件里面会非常难维护,所以我们需要把state,mutaions,actions,getters分别提出来放到各自的文件并导出。
- 每个模块里面有各自的state,mutaions,actions,getters文件;
- 每个模块有一个index.js文件统一导出所有方法;
- 导出模块时可以指定是否使用命名空间,这样可以在组件中指定对应的模块来执行对应的操作;
- 在store的入口文件导入所有模块儿;
- 实例化Store时在modules里面传入模块;
- 使用辅助函数时,如果声明了使用命名空间,可以给辅助函数的第一个参数传入指定模块;
最后,咱给小编:
1. 点赞+关注
2. 点头像关注后多多评论,转发给有需要的朋友。
谢谢!!
- 上一篇: 知了堂|Vue高效前端开发-Vue基本指令
- 下一篇: Vue 非常实用的自定义指令
猜你喜欢
- 2024-11-21 初学Vue(一) -- Vue简单入门
- 2024-11-21 技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)
- 2024-11-21 新手自学前端开发的六个阶段
- 2024-11-21 Vue Shop Vite:轻量级前端开发的新神器
- 2024-11-21 实战 | 基于Vue语言的企业级前端开发框架Hui的应用研究
- 2024-11-21 前端图形学实战:从零开发几何画板(vue3 + vite版)
- 2024-11-21 循序渐进Vue+Element前端开发(14)—根据ABP后端接口实现前端界面
- 2024-11-21 1.8K Star!Cool-Admin-Vue:AI编码+流程编排,重新定义后台开发
- 2024-11-21 VUE3前端开发入门系列教程三:VITE热更新配置及WSL填坑
- 2024-11-21 后端Springboot+前端Vue开发的角色权限管理系统,源码免费分享
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 602℃几个Oracle空值处理函数 oracle处理null值的函数
- 594℃Oracle分析函数之Lag和Lead()使用
- 582℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 579℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 574℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 567℃【数据统计分析】详解Oracle分组函数之CUBE
- 554℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 548℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)