useStore() 方法总是导致组件内的未定义值答案

【问题标题】：useStore() method always leading to undefined value within componentsuseStore() 方法总是导致组件内的未定义值
【发布时间】：2021-08-28 17:49:39
【问题描述】：

我正在使用 Vue3/Vuex 4/TypeScript。

我正在尝试从我的组件 (App.vue) 中访问我的类型化存储。

每当我设置const store = useStore() 时，store 将始终返回为undefined

据我所知，我已经逐字关注了官方Vuex 4 TypeScript Support Documentation。

app.ts

import { createApp, Component } from "vue"
import { createWebHistory, createRouter } from "vue-router"
import { store, key } from "./store/store"
import App from "./pages/App.vue"
import Home from "./pages/Home.vue"
import Lookup from "./pages/Lookup.vue"

const About = { template: "<div>About</div>" }

const routes = [
  { path: "/", name: "home", component: Home as Component },
  { path: "/about", name: "about", component: About },
  { path: "/lookup", name: "lookup", component: Lookup as Component },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

createApp(App).use(router, store, key).mount("#app")

export default router

store.ts

import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'

export interface State {
  count: number
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
  state: {
    count: 0
  }
})

// define your own `useStore` composition function
export function useStore () {
  return baseUseStore(key)
}

App.vue

<script lang="ts">
import { useStore } from '../store/store'
export default {
  setup(): { [key: string]: unknown } {
    const foo = "bar"

    const store = useStore()
    
    console.log(store)
    console.log(store.state.count)

    return { foo }
  },
}
</script>

商店总是以未定义的形式返回，这是我来自 FireFox 的控制台消息

[Vue warn]: injection "Symbol()" not found. 
  at <App> app.js:5871:17
undefined app.js:16779:13
[Vue warn]: Unhandled error during execution of setup function 
  at <App> app.js:5871:17
Uncaught TypeError: store is undefined
    setup http://boilerplate.local/js/app.js:16780
    callWithErrorHandling http://boilerplate.local/js/app.js:5987
    setupStatefulComponent http://boilerplate.local/js/app.js:12359
    setupComponent http://boilerplate.local/js/app.js:12320
    mountComponent http://boilerplate.local/js/app.js:10027
    processComponent http://boilerplate.local/js/app.js:10003
    patch http://boilerplate.local/js/app.js:9621
    render http://boilerplate.local/js/app.js:10704
    mount http://boilerplate.local/js/app.js:8907
    mount http://boilerplate.local/js/app.js:14290
    <anonymous> http://boilerplate.local/js/app.js:23012
    <anonymous> http://boilerplate.local/js/app.js:23014
    <anonymous> http://boilerplate.local/js/app.js:23016

我已经尝试调试了一整天，但确实无法解决问题。非常感谢任何帮助/指导。

【问题讨论】：

标签： typescript vuejs3 vue-composition-api vuex4

【解决方案1】：

您将 Vuex 实例安装到您的应用程序的语法有点不对劲。在每次调用 use 时，您只能将一个 Vue 插件安装到应用程序中，因此像这样组合 router, store, key 是行不通的。因此，根本没有安装 Vuex。

要修复，请更改此行：

createApp(App).use(router, store, key).mount("#app")

到这里：

createApp(App).use(router).use(store, key).mount("#app")

（key 只是传递给store 的一个选项，所以它确实属于第二次调用。）

【讨论】：