为什么在 vue 3 composition api 中使用 useStore()？答案

【问题标题】：Why use useStore() in vue 3 composition api?为什么在 vue 3 composition api 中使用 useStore()？
【发布时间】：2023-02-10 16:59:11
【问题描述】：

您能否解释一下在 vue 3 组件 (composition-api) 中使用 useStore() 函数的原因是什么？

我很困惑，因为直接导入商店也是可行的，例如：

<script setup>
import { store } from '@/store';

const foo = computed(() => store.getters['foo']); // works!
</script>

但很多时候我看到人们使用useStore()代替：

<script setup>
import { useStore } from 'vuex';

const store = useStore();

const foo = computed(() => store.getters['foo']); // also works well
</script>

为什么？到目前为止感觉就像一行额外的代码。我想我错过了什么。

谢谢

重要更新: 我发现 useStore() 在单元测试期间也有意义，否则商店的模拟无法正常工作。

【问题讨论】：

标签： javascript vue.js vuejs3 vuex vue-composition-api

【解决方案1】：

根据文档，这都是关于组合 API 中最新的商店实例：

我们讨论如何在 Vue 2 和 Vuex 3 项目中检索商店。或许你已经有了答案，很简单，使用this.$store即可。但是，我们知道 Composition API，在 setup() 中这不会是对当前活动实例的引用因为调用了 setup() 在解决其他组件选项之前。

documentation

【讨论】：