Examples of how to use the modules in a Vue component

Having been frustrated by vuex-typescript I thought I would give this ago but I find that I am struggling without, apparently, any examples of how to import and use the modules (and the getters, actions etc) in a standard Typescript Vue component.

It looks like it could be a useful library but the README is too lightweight at the moment. Any chance of some better, more complete examples?

[danielroe]

@Yackbz In Nuxt, index.ts can have export functions and objects, and that is where your nuxtServerInit() belongs. That function can then call server initialisation functions in modules.

So, for example:

import { ActionTree, Store } from 'vuex'
import Vue from 'vue'

import { initialiseStores, sampleStore } from '~/utils/store-accessor'
import { RootState } from '~/types/state'

const initializer = (store: Store<any>) => initialiseStores(store)
export const plugins = [initializer]

export const actions: ActionTree<RootState, RootState> = {
  async nuxtServerInit(_context, server: { req: IncomingMessage; app: Vue }) {
    await sampleStore.serverInit(server)
  },

  async nuxtClientInit(context) {
    await sampleStore.clientInit()
  },
}

export * from '~/utils/store-accessor'

Note that the above code doesn’t use vuex-module-decorators for the index.ts, but it does for everything else. Also see #124 for an example of what the store-accessor would look like.

[kpturner]

After much faffing around I defined the module like this:

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


@Module({ stateFactory: true, name: 'counter' })
export default class CounterModule extends VuexModule {
    private count: number = 0;

    @Mutation
    public increment(delta: number): void {
        this.count += delta;
    }
    @Mutation
    public decrement(delta: number): void {
        this.count -= delta;
    }

    // action 'incr' commits mutation 'increment' when done with return value as payload
    @Action({ commit: 'increment' })
    public incr(): number {
        return 5;
    }
    // action 'decr' commits mutation 'decrement' when done with return value as payload
    @Action({ commit: 'decrement' })
    public decr(): number {
        return 5;
    }

    get getCount(): number {
        return this.count;
    }

}

Then accessed it in my Vue component like this:

import CounterModule from '../store/modules/test_module';
import { getModule } from 'vuex-module-decorators';
let counterModule: CounterModule;

Then

created() {
        counterModule = getModule(CounterModule, this.$store);
}

Then I was able to access methods etc elsewhere - for example

computed: {
        counter() {
            return counterModule.getCount
        }
    }

But it seems a bit contrived. Is this a good way or is there a better way, considering that I am not using vue-class-component ?