Support of Vue3?

[YakovL]

Hi there, vuex-typex is a great tool to provide typings to store methods, but it seem to be not adapted to Vue 3. In Vue 3, Vue root is not global, so main Vue root object is created via createApp in main.ts and in store/index.ts one can't just do Vue.use(Vuex) (use is not present in that). Instead, main.ts reads:

...
import store from './store'

createApp(App)
    .use(store)
    .use(router)
    .mount('#app')

But without using Vue.use(Vuex) in store/index.ts going like

import { Store } from 'vuex'
import { getStoreBuilder } from 'vuex-typex'
import { UserState } from './modules/user'

export interface RootState {
    user: UserState
}

const store: Store<RootState> = getStoreBuilder<RootState>().vuexStore();
export default store

gives a runtime error "[vuex] must call Vue.use(Vuex) before creating a store instance"; moreover, TS gives a compile-time error:

const store: Store Property 'install' is missing in type 'import("/node_modules/vuex-typex/node_modules/vuex/types/index").Store<import("/src/store/index").RootState>' but required in type 'import("/node_modules/vuex/types/index").Store<import("/src/store/index").RootState>'.ts(2741) index.d.ts(18, 3): 'install' is declared here.

How can I fix this? Is support of Vue3 available or it requires updating Vuex-typex itself?

[mrcrowl]

I suspect that it will require a new version of vuex-typex which targets @.*** to make this work.

If you are interested in making this work please start a PR, and I’ll work through it with you.

On Thu, 19 May 2022 at 8:16 PM, Yakov Litvin @.***> wrote:

Hi there, vuex-typex is a great tool to provide typings to store methods, but it seem to be not adapted to Vue 3. In Vue 3, Vue root is not global, so main Vue root object is created via createApp in main.ts and in store/index.ts one can't just do Vue.use(Vuex) (use is not present in that). Instead, main.ts reads:

... import store from './store'

createApp(App) .use(store) .use(router) .mount('#app')

But without using Vue.use(Vuex) in store/index.ts going like

import { Store } from 'vuex' import { getStoreBuilder } from 'vuex-typex' import { UserState } from './modules/user'

export interface RootState { user: UserState }

const store: Store = getStoreBuilder().vuexStore(); export default store

gives a runtime error "[vuex] must call Vue.use(Vuex) before creating a store instance"; moreover, TS gives a compile-time error:

const store: Store Property 'install' is missing in type 'import("/node_modules/vuex-typex/node_modules/vuex/types/index").Store<import("/src/store/index").RootState>' but required in type 'import("/node_modules/vuex/types/index").Store<import("/src/store/index").RootState>'.ts(2741) index.d.ts(18, 3): 'install' is declared here.

How can I fix this? Is support of Vue3 available or it requires updating Vuex-typex itself?

— Reply to this email directly, view it on GitHub https://github.com/mrcrowl/vuex-typex/issues/46, or unsubscribe https://github.com/notifications/unsubscribe-auth/AANWRIHO57EX4KOHF3JOKHDVKX2HDANCNFSM5WLLHCOA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[YakovL]

Well, I am interested indeed, but I'm not sure where to start from, what changes to put so that I can create a PR. Any suggestions?

[mrcrowl]

Start by forking the repo, clone locally, and run yarn to install dependencies.

Then upgrade the dependencies in package.json to the ones that you want. Presumably vue and vuex will need the 3.x versions.

Then see what breaks! :D

Since this will be a breaking change, it will need a new major version in the package.json too. It might be worth matching this with Vue and making it v3.x.x

Tbh, I'm a bit out of the loop with Vue and Vuex these days... so I haven't kept a close eye of what's been going on.

On Sat, 21 May 2022 at 22:39, Yakov Litvin @.***> wrote:

Well, I am interested indeed, but I'm not sure where to start from, what changes to put so that I can create a PR. Any suggestions?

— Reply to this email directly, view it on GitHub https://github.com/mrcrowl/vuex-typex/issues/46#issuecomment-1133627461, or unsubscribe https://github.com/notifications/unsubscribe-auth/AANWRIBJUOXKJO5EMCBJZCLVLDKPTANCNFSM5WLLHCOA . You are receiving this because you commented.Message ID: @.***>

[ma8642]

Has anyone found an alternative to this? I am migrating my team's Vue 2 app and it uses this library.

[mrcrowl]

Vuex has been deprecated in favour of Pinia by the Vue core team.

Pinia has built-in TypeScript support and a similar-enough API to Vuex to make migration manageable, with a few notable differences.

vuex-typex was only created to work around the fact that early versions of Vuex gave little consideration to TypeScript.