【Vue】Vuex模块化的使用小结

1.直接使用

  1. state --> $store.state.模块名.数据项名
  2. getters --> $store.getters'**模块名**/属性名'
  3. mutations --> $store.commit('模块名/方法名', 其他参数)
  4. actions --> $store.dispatch('模块名/方法名', 其他参数)

2.借助辅助方法使用

1.import { mapXxxx, mapXxx } from 'vuex'

computed、methods: {

​ // ...mapState、...mapGetters放computed中;

​ // ...mapMutations、...mapActions放methods中;

​ ...mapXxxx('模块名', '数据项\|方法'),

​ ...mapXxxx('模块名', { 新的名字: 原来的名字 }),

}

2.组件中直接使用 属性 {``{ age }} 或 方法 @click="updateAge(2)"

相关推荐
ss2736 分钟前
Vue 完整版本发展史时间线(2013–2026)|版本迭代里程碑+核心特性对照表
前端·javascript·vue.js
用户938515635077 分钟前
知识库预处理实战:从URL加载到语义分块的全链路解析
javascript·人工智能·全栈
亿元程序员17 分钟前
为什么大家都那么喜欢用Shader?
前端
Codebee19 分钟前
OODER Studio设计工具导入体系深度解析
前端
英勇无比的消炎药21 分钟前
体积砍半、加载提速、请求不卡:TinyRobot 生产环境性能调优全攻略
vue.js
weedsfly23 分钟前
前端开发中的命令模式——从点餐退单到异步任务调度
前端·javascript·面试
慢功夫23 分钟前
💡第四篇:编辑器内核, Monaco model、URI、dirty 状态和 tabs 是怎么协作的?
前端·visual studio code
小马过河R26 分钟前
微前端实践:从概念、原理到 qiankun 落地
前端·人工智能·前端框架
用户0595401744633 分钟前
AI记忆存储一致性踩坑实录:每天手工回归200条对话,直到我用pytest+Redis搭建自动化验证
前端·css
weedsfly34 分钟前
前端中的适配器模式 vs 外观模式
前端·javascript·面试