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;
相关推荐
IT_陈寒1 分钟前
Vue这个特性差点让我加班到凌晨,谁懂啊
前端·人工智能·后端
kyriewen5 分钟前
我让AI改一个bug——它偷偷动了5个我没让它碰的地方
前端·javascript·ai编程
遇乐的果园35 分钟前
前端学习笔记-vue加载渲染优化
前端·笔记·学习
用户985033593281 小时前
OpenLayers 热力图从原理到 Vue 组件一键接入
前端
颜酱1 小时前
01 | 骨架搭建:FastAPI + Vue 跑通第一个 SSE 流式问答
前端·人工智能·后端
hoLzwEge1 小时前
解码 IDE 智能提示:jsconfig.json 辅助开发全攻略
前端·前端框架
leoZ2311 小时前
记忆系统与 Agent 定制完全指南(四):自定义 Agent 开发(一)
前端·chrome
慧一居士2 小时前
Element Plus 按需引入的配置使用说明和完整示例
前端·vue.js
程序员黑豆2 小时前
鸿蒙应用开发实战:从零学会自定义组件
前端·华为·harmonyos
leoZ2312 小时前
记忆系统与 Agent 定制完全指南(三):记忆的检索与使用
前端·chrome