createStore with key get error after vite hot updated

[qiuyaofan]

Version

4.0.1

Steps to reproduce

main.js

// main.ts
import { createApp } from 'vue'
import { store, key } from './store'

const app = createApp({ ... })

// 传入 injection key
app.use(store, key)

app.mount('#app')

store.js

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

// 为 store state 声明类型
export interface State {
  count: number
}

// 定义 injection key
export const key: InjectionKey<Store<State>> = Symbol('admin-store')

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

export default store;

export function useStore<T = State>(): any {
    return baseUserStore<T>(key);
}

index.vue

import { useStore } from './store'

export default {
  setup () {
    const store = useStore() //  undefined

  }
}

What is expected?

when I change index.vue and save, vite finish hot update can correct to get useStore() in setup function

What is actually happening?

when I change index.vue and save, vite finish hot update
useStore() return undefined, and warnning injection "Symbol(admin-store)" not found

---

but I remove key，it‘s work fine.

[web-zhangbo]

in *.vue use import { useStore } form 'xxx/store.js' // not from 'vuex'

eg:

// in a vue component
import { useStore } from './store'

export default {
  setup () {
    const store = useStore()

    store.state.count // typed as number
  }
}

[CarloLei]

I had the same problem.

[Alanscut]

@qiuyaofan you just need import key from store.js and pass the key to useStore:

// index.vue
import { useStore } from 'vuex'
import { key } from './store'  // import key from store.js

export default {
  setup () {
    const store = useStore(key) //  pass the imported key to useStore

  }
}

[kiaking]

Yap, this is either #2019 (comment) or #2019 (comment).

Feel free to open another issue if there's anything 👍

[qiuyaofan]

@kiaking
I use the method in the official document，because Having to import InjectionKey and passing it to useStore everywhere it's used can quickly become a repetitive task;I want to aviod it
https://next.vuex.vuejs.org/guide/typescript-support.html#typing-usestore-composition-function

[s4kr4]

I had the same problem.

[kiaking]

Can't you use Simplifying useStore usage?

[AustinQin]

I have the same problem.

[fxjs]

I had the same problem, is there a final solution? thanks.
@qiuyaofan

[normanfan]

export const key: InjectionKey<Store<State>> = Symbol('admin-store')

can you fix it by taking Symbol to Symbol.for ?

[PolanZ]

same problem at component hot updated time.

[cweibo]

临时解决办法

// 定义 injection key
export const storeKey: InjectionKey<Store<State>> = '__app_store_key__' as any

[Fleeck]

export const key: InjectionKey<Store<State>> = Symbol('admin-store')

can you fix it by taking Symbol to Symbol.for ?

This worked for me! Thanks @normanfan