Support for Vue 3

[ghost]

I'm using Vue 3 + Typescript with vue /cli, but I'm not getting it to work.

/store/counter.ts

import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'

@Module
export default class Counter extends VuexModule {
  count = 0

  get $count() {
    return this.count
  }

  @Mutation
  INCREMENT(number: number) {
    this.count += number
  }

  @Action
  increment() {
    this.context.commit('INCREMENT')
  }
}

/store/index.ts

import { createStore } from 'vuex'
import counter from '@/store/counter'

export default createStore({
  state: {},
  modules: {
    counter
  }
})

any suggestion?

vuex-module-decorators still don't support Vue 3?

I read several times @championswimmer saying that I was waiting for vue 3 to be released to update the package, but it has already been released, already it will launch Nuxt 3 too ... I would love to use vuex-module-decorators

[miyukoarc]

You can use it as before. Just create A module and import it to use. Don't even need to install to the Vue app.

/**
* countModule
*/
import {
    getModule,
    VuexModule,
    Mutation,
    Action,
    Module
} from 'vuex-module-decorators';
import { store } from '.';

@Module({ dynamic: true, namespaced: true, store, name: 'Count' })
class Count extends VuexModule {
    count: number = 0;

    @Mutation
    INCREMENT() {
        this.count++;
    }

    @Mutation
    DECREMENT() {
        this.count--;
    }

    @Action
    incrementAfterTime(payload: number) {
        const delay = payload;
        return new Promise<void>(resolve => {
            window.setTimeout(() => {
                this.INCREMENT();
                resolve();
            }, delay);
        });
    }
}

export const countModule = getModule(Count);

/**
* store.ts
*/
import { createStore } from 'vuex'
export const store = createStore({
})

/**
* App.vue
*/
...
setup(){
  function incrase(){
    countModule.INCREMENT()
  }
  return {
    incrase
  }
}
...

[VitAndrGuid]

Make yourself a favor and stay away from vuex and this module when using vue 3 and just use the composition api (if possible)

[ndup0nt]

@VitAndrGuid could you explain what you mean about the composition API (I don't know much of it) ? What's new that makes the store less useful than before ?

[VitAndrGuid]

@ndup0nt The composition API doesn't make this package less useful. It exposes vue reactivity system outside of components, with that you can create your own state and modules on simple .ts files, with full Typescript support, if you're tired of fighting vuex lack of proper typescript support and you don't depend on vuex and its plugins you might as well just write your own simple and easily testable "store".

I have written a big application with Vue 2 + vuex + vuex-module-decorators but issues such as: https://github.com/championswimmer/vuex-module-decorators/issues/304 https://github.com/championswimmer/vuex-module-decorators/issues/125 https://github.com/championswimmer/vuex-module-decorators/issues/277 and other made it quite a pain, but i sticked to this lib because as far as i know there is no mature state management library for vue2 with ts support, but you don't need one in vue3

[Klowes]

@VitAndrGuid Are you saying this library is confirmed stable in Vue 3?

I have a huge enterprise app that utilizes this library and I would very much like to get it into Vue 3 and start utilizing the composition API in our new dev without having to rewrite all of our global state handling.

[VitAndrGuid]

@Klowes I don't know about this library and its vue3 support, i only used it with vue2. I guess it wouldn't be too much of a problem since vuex 3 and vuex 4 API's are nearly identical and there's only a few breaking changes.

[tvkit]

Make yourself a favor and stay away from vuex and this module when using vue 3 and just use the composition api (if possible)

@VitAndrGuid can you elaborate? Are we talking about global refs/reactives ?

[VitAndrGuid]

@tvkit yes

[YakovL]

@VitAndrGuid could you share a link to a good code example with composition API showing how one can use it instead of a vuex module so that me and others can take a look and make their conclusions/decisions?

PS Looked up some tutorials so that others can jump in (although a definitive article would be nicer): composition API and some pros/cons of substituting Vuex, a course on Vue 3 + TS, composition API video.

@miyukoarc could you show how to use getters from your example in components? I'm getting function () { [native code] } in html, so I wonder what am I doing wrong:

// store/modules/user.ts
import { VuexModule, Module, Mutation, getModule } from 'vuex-module-decorators'
import store from "../index"
@Module({
    name: 'user',
    namespaced: true,
    store,
    dynamic: true,
})
class User extends VuexModule {
    public session = false //# will be a string
    public get session2() {
        return this.session
    }
    @Mutation
    public setSession (session: boolean): void {
        this.session = session
    }
}
const userModule = getModule(User)
export default userModule

// store/index.ts
import { createStore } from 'vuex'
const store = createStore({})
export default store

// some component
import { Options, Vue } from 'vue-class-component'
import userModule from '../store/modules/user'

@Options({})
export default class MyComponent extends Vue {
    testSesstion(): boolean {
        return userModule.session
    }
    testSesstion2(): boolean {
        return userModule.session2
    }
    async testWithButton() {
        console.log('session:', userModule.session)
        console.log('session2:', userModule.session2)
    }
    // ...
}
// in component template
{{testSesstion}} {{testSesstion2}} [and a button calling testWithButton]

What I'm getting is – both {{testSesstion}} and {{testSesstion2}} produce "function () { [native code] }" while console.log from testWithButton shows false as expected.

PS I also wonder if it's possible to use the old way, to make the modules accessible from this.$store.state.moduleName without extra imports in each component.

[olsgreen]

Well.. for any readers out there pondering their state management and hitting this thread, a lot has changed in a year and a half:

• vuex is now deprecated and in 'maintenance mode'
• vue 2.7 has been released with a ton of features back ported (including the reactivity APIs) from 3.0, which makes hand rolling your own state management tantalisingly possible (and migration prep for 3.x much less of a chore).
• pinia is the official replacement for vuex, with a composable API and robust typescript support.

Not one for bumping old threads, but hey, here I am.

[NikhilVerma]

I think most people are looking for upgradeable Vue2 > Vue3 libraries because a large number of Vue libraries (e.g. vee-validate, v-tooltip, v-calendar, vue-multiselect) have difficult migration paths. And migration from Vue2 to 3 is not an incremental process, it has to require a significant initial chunk of work (migrationg to Vue3 compat build + migrating to all the other dependent libraries).

So if developers have one less library to worry about in their migration path the better it will be.

We are still struggling with a reasonable plan to migrate to Vue 3 which doesn't require weeks/months of development stoppage while we migrate.

[pylvr]

@NikhilVerma what solution did you end up with ?

[championswimmer]

Given that Pinia is the preferred state management way for Vue3, I am not seeing much use of keeping this thread alive with any hope :)