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;
相关推荐
Dragon Wu4 分钟前
ReactNative Expo 使用总结(基础)
javascript·react native·react.js
真上帝的左手21 分钟前
24. 前端-js框架-Electron
前端·javascript·electron
毛发浓密的女猴子26 分钟前
Git Pull 策略完全指南:Merge、Rebase、Fast-forward 深度对比
前端
夏小花花27 分钟前
<editor> 组件设置样式不生效问题
java·前端·vue.js·xss
PieroPC28 分钟前
用 nicegui 3.0 + sqlite3 做个简单博客
前端·后端
weixin_3077791328 分钟前
Jenkins Ioncions API 插件:现代化图标库在持续集成中的应用
java·运维·开发语言·前端·jenkins
兔子零102429 分钟前
零硬件交互:如何用纯前端把摄像头变成 4000 个粒子的魔法棒?
前端·算法
北辰alk29 分钟前
Vue Router 组件内路由钩子全解析
前端·vue.js
克喵的水银蛇33 分钟前
Flutter 弹性布局实战:Row/Column/Flex 核心用法与优化技巧
前端·javascript·typescript
verse_armour33 分钟前
东南大学云课堂导出PPT
javascript