Vuex-module-decorators: Support for Vue 3

[yungsilva]

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