Vue3里的setup中使用vuex

最新推荐文章于 2025-11-09 20:30:00 发布

原创最新推荐文章于 2025-11-09 20:30:00 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

Vue3.X 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在Vue的setup函数中使用Vuex4.x的useStore方法来访问和操作状态。通过解构导入useStore，可以直接在setup中获取到store实例，从而替代模板中的this.$store。示例展示了如何读取state和提交mutations，例如显示state.count并定义一个increaseCount方法来增加计数。

useStore

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

template 使用$store

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

//引入路由函数
import { useStore } from "vuex";

//使用
setup() {
    //使用vuex
    const store = useStore();
    //正常使用，相当于store代替了this.$store
    //store.state.	...
    console.log(store.state.count);

    const increaseCount = () => {
      store.commit("increaseCount");
    };
    return { increaseCount };
}