vue3在setup中使用vuex相关方法

最新推荐文章于 2025-10-13 16:56:03 发布

原创最新推荐文章于 2025-10-13 16:56:03 发布 · 1.2w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

日常学习专栏收录该内容

22 篇文章

订阅专栏

本文介绍了在 Vue3 的 setup 函数中，由于不存在 this，如何通过 vuex 4.x 的 useStore 方法来访问和使用 Vuex 的相关功能。详细展示了在 setup 中直接解构 useStore 的实例应用。

setup没有this

我们知道vue3的setup函数中是没有this的，就算传了context参数，打印出来也没有相关属性

useStore

这里我们可以直接从vuex 4.X中解构出useStore方法，就可以在setup中使用vuex的相关函数了，例子如下

<template>
  <div>
    <h2>{{ $store.state.count }}</h2>
    <button @click="plusCount">点击</button>
  </div>
</template>

<script>
import { useStore } from "vuex";

export default {
  setup(props, context) {
    const store = useStore(); // 使用useStore方法
    console.log(store);

    function plusCount() {
      store.commit("increaseCount");
    }
    return { plusCount };
  },
};
</script>