quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.88k stars 3.51k forks source link

Provide InjectionKey as option when installing Vuex plugin #8511

Closed jaredmcateer closed 3 years ago

jaredmcateer commented 3 years ago

Is your feature request related to a problem? Please describe. I want to be able to provide an InjectionKey when installing the vuex plugin so I can get better typescript support.

Describe the solution you'd like There needs to be a mechanism for providing a Symbol,

// store/index.ts
export const key: InjectionKey<Store<MyStateInterface>> = Symbol()

as an option when installing the vuex store

// .quasar/client-entry.js
import {key} from '../src/store'
app.use(store, key)

and allows the user to also use this Symbol when retrieving the store in a vue component using compositional api

// src/pages/Index.vue
setup() {
  // const store = useStore() // <- Store<any>
  const store = useStore(key) // <- Store<MyStateInterface>
}

Describe alternatives you've considered It's possible to override the type of useStore but that is error prone and cumbersome

Additional context Here is the relevant documentation for using InjectionKey with Vuex4 https://next.vuex.vuejs.org/guide/typescript-support.html#typing-usestore-composition-function

rstoenescu commented 3 years ago

Will be available through q/app v3.0.0-beta.11

farums commented 3 years ago

quasar.conf.js => store: 'src/Domain/App/Store.ts',

Error:Module not found: Can't resolve imported dependency "app/src/store/index"

import createStore from 'app/src/Domain/App/Store.ts'
  const { storeKey } = await import('app/src/store/index');
IlCallo commented 3 years ago

Fixed, will be available in next release