Vue3里的setup中使用vuex

最新推荐文章于 2024-08-17 10:30:54 发布

yusirxiaer

最新推荐文章于 2024-08-17 10:30:54 发布

阅读量3.4k

点赞数 2

分类专栏： Vue3.X

本文链接：https://blog.csdn.net/yusirxiaer/article/details/115719704

版权

Vue3.X 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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 };
}