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;
相关推荐
猪猪拆迁队2 分钟前
前端图形引擎架构设计:双引擎架构设计
前端·后端·架构
宋辰月38 分钟前
学习react第三天
前端·学习·react.js
bug总结41 分钟前
更新原生小程序封装(新增缓存订阅)完美解决
前端·缓存·小程序
GISer_Jing1 小时前
Node.js 开发实战:从入门到精通
javascript·后端·node.js
5335ld1 小时前
后端给的post 方法但是要求传表单数据格式(没有{})
开发语言·前端·javascript·vue.js·ecmascript
二川bro1 小时前
第33节:程序化生成与无限地形算法
前端·算法·3d·threejs
QDKuz1 小时前
掌握Vue2转Vue3, Options API 转 Composition API
前端·javascript·vue.js
老前端的功夫1 小时前
前端Echarts性能优化:从卡顿到流畅的百万级数据可视化
前端·javascript
进击的野人1 小时前
深入解析localStorage:前端数据持久化的核心技术
前端·javascript
懵圈1 小时前
第2章:项目启动 - 使用Vite脚手架初始化项目与工程化配置
前端