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;
相关推荐
Forever Nore5 分钟前
前端技能包
前端
江城开朗的豌豆23 分钟前
JavaScript篇:前端定时器黑科技:不用setInterval照样玩转循环任务
前端·javascript·面试
书中自有妍如玉28 分钟前
.net 使用MQTT订阅消息
java·前端·.net
江城开朗的豌豆1 小时前
JavaScript篇:自定义事件:让你的代码学会'打小报告'
前端·javascript·面试
ai产品老杨2 小时前
减少交通拥堵、提高效率、改善交通安全的智慧交通开源了。
前端·vue.js·算法·ecmascript·音视频
lexiangqicheng2 小时前
JS-- for...in和for...of
开发语言·前端·javascript
smallluan2 小时前
JS设计模式(4):观察者模式
javascript·观察者模式·设计模式
粥里有勺糖2 小时前
视野修炼-技术周刊第122期 | 发光图片制作
前端·javascript·github
y102121042 小时前
Python训练营打卡Day42
开发语言·javascript·ecmascript
Carlos_sam2 小时前
OpenLayers:封装Tooltip
前端·javascript