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;
相关推荐
烈风逍遥21 小时前
第七篇:提示词模板管理与 Agent 提示词编排
前端·人工智能·后端
Amos_Web21 小时前
Rspack 源码解析(十二):JavaScript Chunk 是如何被渲染出来的
前端·rust·源码
前端探险家Rick21 小时前
React Native 二级弹出面板 + 键盘适配:从踩坑到正确方案
前端
用户9210802628621 小时前
MCP 是什么?用 Figma MCP 辅助还原 Vue 页面
前端
用户9210802628621 小时前
用 Figma MCP 还原 Vue 页面时,我遇到的三个问题
前端
修罗王21 小时前
从 React Bits 到 Vue/Svelte Bits:重新定义前端“视觉表达层“
前端
kiros_wang21 小时前
Notification 本地通知:定时消息、点击路由跳转、桌面角标适配
前端
计算机毕设定制辅导-无忧学长21 小时前
《基于Vue的流浪动物救助中心管理系统的设计与实现》
java·vue.js·spring boot·流浪动物救助中心管理系统
flash俊杰21 小时前
SQLite + sqlite-vec:100 篇文档内的私域知识库怎么做
前端