时间戳

首页 > 解决方案 > useStore() method always leading to undefined value within components

typescript - useStore() method always leading to undefined value within components

问题描述

I am using Vue3/Vuex 4/TypeScript.

I am trying to access my typed store from within my component (App.vue).

Whenever I set const store = useStore(), store will always return as undefined

As far as I can tell, I've followed the official Vuex 4 TypeScript Support Documentation verbatim.

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>

store is always returning as undefined, here's my console messages from 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

I've tried to debug this all day but really can't narrow in on the problem. Any help/guidance is greatly appreciated.

标签： typescriptvuejs3vue-composition-apivuex4

解决方案

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

要修复，请更改此行：

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

对此：

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

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

推荐阅读