【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)"

相关推荐
一壶浊酒..5 分钟前
Scrape Webpack练习
开发语言·javascript·webpack
程序员黑豆25 分钟前
Windows 系统 Java 环境变量配置全攻略:解决“不是内部或外部命令”
java·前端·ai编程
To_OC41 分钟前
别只拿 useRef 绑 DOM 了,搭配 Web Worker 解决页面卡顿才是真的香
前端·react.js·dom
IT_陈寒2 小时前
Vue的响应式让我原地破防,原来问题出在这
前端·人工智能·后端
子兮曰2 小时前
Bun vs Node.js 深度对决:跑分快 4 倍,真实业务只剩 3%,2026 年到底该怎么选?
前端·后端·typescript
计算机魔术师2 小时前
终端用户
前端
码事漫谈3 小时前
把 AI 拆掉,你的系统还能跑吗?
前端·后端
默_笙4 小时前
⛵ 我用 React + TS 做了个"调色盘",顺便学会了企业级项目的目录架构
前端·javascript
预知同行4 小时前
从 MCP 到 CLI:AI Agent 工具链的架构演进与实战抉择
前端·面试
何智超4 小时前
AI 微前端性能优化之旅(中):重启
前端·vibecoding