为什么我通过从 Vuex 调用 useStore 得到未定义？ Quasar 中的组合 API、Vuex 和 Typescript答案

【问题标题】：Why I get undefined by calling useStore from Vuex? Composition API, Vuex and Typescript in Quasar为什么我通过从 Vuex 调用 useStore 得到未定义？ Quasar 中的组合 API、Vuex 和 Typescript
【发布时间】：2021-12-31 12:27:26
【问题描述】：

我在 setup 钩子中调用 useStore，然后，当我尝试使用某些 store 功能。

App.vue

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'App',
  setup () {
    const store = useStore()
    const obtenerAppInitInfo = () => store.dispatch('App/obtenerAppInitInfo')
    console.log(store) // displays undefined
    onMounted(async () => {
      await obtenerAppInitInfo() // TypeError: Cannot read properties of undefined (reading 'dispatch')
    })
    return {}
  }
})
</script>

选项 API 中的相同逻辑可以正常工作。任何人都知道为什么我通过调用useStore 得到undefined？

【问题讨论】：

你安装插件了吗？ IE。 createApp(…).use(store)

标签： typescript vue.js vuex quasar-framework

【解决方案1】：

在 Quasar(v2) 中使用 Vuex 和 Typescript 时会出现此问题。

在他们的文档中，他们说：

如果您在使用 Quasar CLI 创建项目文件夹时选择使用 Vuex 和 TypeScript，它会在 src/store/index.ts 中添加一些输入代码。要在组件中获得类型化的 Vuex 存储，您需要像这样修改 Vue 文件：

<script lang="ts">
import { defineComponent } from 'vue';

// Import the typed store offered by quasar. We no longer import it from vuex.
import { useStore } from 'src/store';

export default defineComponent({
  setup () {
    const store = useStore()
  }
})
</script>

这解决了我的问题。我想提一下，通过这种方式我们可以在组件中获取商店类型，这很棒。

【讨论】：