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;
相关推荐
Web极客码11 小时前
用 Python 搭建工具调用 Agent 的调试过程
java·服务器·前端
2401_8818283212 小时前
简易文本处理网页工具|AI 通识课第三次作业
前端·javascript·html
障碍的枫子12 小时前
Vue组件导出&渲染
前端·javascript·vue.js
开开心心就好12 小时前
视频播放器完美解码集成三款播放器切换使用
前端·人工智能·智能手机·电脑·音视频·virtualenv·pygame
Sterting12 小时前
组件通信:Props 与 Emit
前端·vue.js
东方老白12 小时前
iOS 面试题
前端
hunterandroid12 小时前
Compose LazyColumn 性能优化:从卡顿到流畅的大列表治理
前端
喵个咪12 小时前
GoWind Shop 架构剖析:一个 REST 请求穿越三服务 BFF 的七环链路
vue.js·后端·go
喵个咪12 小时前
GoWind Shop 安全设计:JWT 鉴权、Ent 行级隔离、防篡改审计与四个真实漏洞修复
vue.js·后端·go
喵个咪12 小时前
GoWind Shop:一个 proto 文件如何生成后端、前端、文档、校验六路代码
vue.js·后端·go