Vue3 精通指南:如何在 setup 函数中巧妙利用 Vuex

在 Vue 3 中,如果你使用了组合式 API(Composition API),你可以通过 setup 函数来设置组件的响应式状态和逻辑。要在 setup 函数中访问 Vuex 的 $store,你可以使用 useStore 钩子,它是 Vuex 4 为 Vue 3 提供的一个新 API。

首先,确保你已经安装并设置了 Vuex。然后,你可以按照以下步骤在 setup 函数中访问 $store

1、在你的 Vue 组件中导入 useStore 钩子。

2、在 setup 函数中调用 useStore 来获取 Vuex 的 store 实例。

3、使用 store 实例来访问状态、提交 mutations 或者分发 actions。

下面是一个简单的示例:

复制代码
// store.js
import { createStore } from 'vuex';

// 创建一个新的 store 实例
const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

export default store;
相关推荐
To_OC1 小时前
我终于搞懂 Claude Code 核心逻辑!90%的人都用错了模式
前端·ai编程
蓝宝石的傻话1 小时前
Headless浏览器的隐形陷阱:为什么你的AI自动化工具抓不到页面早期错误?
前端
zithern_juejin1 小时前
原型与原型链
javascript
irving同学462381 小时前
Node 后端实战:JWT 认证与生产级错误处理
前端·后端
莽夫搞战术1 小时前
【Google Stitch】AI原生画布重新定义设计,让想法变成可交互界面
前端·人工智能·ui
甲维斯1 小时前
Gemini3.5Flash前端是真的强!
前端·人工智能
光泽雨2 小时前
c#中的Type类型
开发语言·前端
Captaincc2 小时前
来自 Codex 官方团队的分享:如何把 Codex 用到极致
前端·vibecoding
码云之上2 小时前
万星入坞·其三:SDK 轻量组件如何优雅地"点亮"
性能优化·架构·前端框架
lichenyang4532 小时前
鸿蒙聊天 Demo 练习 05:新增登录功能,实现登录态保存与页面访问控制
前端