michaelolof / vuex-class-component

A Type Safe Vuex Module or Store Using ES6 Classes and ES7 Decorators written in TypeScript.
217 stars 21 forks source link

[v2.1.3] Components getters and actions break #53

Closed saniales closed 5 years ago

saniales commented 5 years ago

NOTE: Everything works in version 2.1.1: I suggest a revert

from this example

import { createModule, action, mutation, getter } from "vuex-class-component";
import { VuexModuleOptions } from 'vuex-class-component/dist/interfaces';

const VuexModule = createModule({
    namespaced: "exampleStore",
    strict: false,
} as VuexModuleOptions);

export default class ExampleStore extends VuexModule {
    private incrVal : number = 0;

    get currentExampleValue() : number {
        // if "this.incrVal = this.incrVal + 1;" is commented it works
        this.incrVal = this.incrVal + 1; // error, store.commit is not a function
        return this.incrVal;
    }
}

creating a proxy of this component like this fails

<template>
    <div>
      <strong> Computed: {{computedInfo}} </strong><br/>
      <strong> value from Vuex: {{example.currentExampleValue}}</strong><br/>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';

import { example } from "@/vuex";
import Component from 'vue-class-component';

@Component({})
export default class HomePage extends Vue {
    example = example;
    mounted() : void {
        console.log("mounted");
    }

    get computedInfo() : string {
        return "Computed" + " " + "example";
    }
}
</script>

Here a copy of the stack trace

TypeError: store.commit is not a function
    at Object.set (proxy.js?fe19:250)
    at Object.get (index.ts?9da9:13)
    at getter (module.js?843e:170)
    at wrappedGetter (vuex.esm.js?2f62:777)
    at Vue.eval (vuex.esm.js?2f62:95)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4578)
    at Vue.computedGetter [as exampleStore/currentExampleValue] (vue.runtime.esm.js?2b0e:4830)
    at Object.get [as exampleStore/currentExampleValue] (vuex.esm.js?2f62:567)
    at Object.get (proxy.js?fe19:388)

Let's move to actions now

given the following

import { createModule, action, mutation, getter } from "vuex-class-component";
import { VuexModuleOptions } from 'vuex-class-component/dist/interfaces';

const VuexModule = createModule({
    namespaced: "exampleStore",
    strict: false,
} as VuexModuleOptions);

export default class ExampleStore extends VuexModule {
    private incrVal : number = 0;

    get currentExampleValue() : number {
        return this.incrVal;
    }

    @action async bicrement() : Promise<void> {
        this.incrVal+=2;
    }
}

if you use it it breaks

<template>
    <div>
      <strong> Computed: {{computedInfo}} </strong><br/>
      <strong> value from Vuex: {{example.currentExampleValue}}</strong><br/>
      <button @click="triggerIncrement()"> INCREMENT! </button><br/>
    </div>
</template>
<script lang="ts">
import Vue from 'vue';

import { example } from "@/vuex";
import Component from 'vue-class-component';

@Component({})
export default class HomePage extends Vue {
    example = example;

    mounted() : void {
        console.log("mounted");
    }

    get computedInfo() : string {
        return "Computed" + " " + "example";
    }

    triggerIncrement() : void {
        this.example.bicrement();
    }
}
</script>

Here the stack trace

TypeError: this.example.bicrement is not a function
    at VueComponent.triggerIncrement (HomePage.vue?ac04:39)
    at click (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"367216db-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/HomePage.vue?vue&type=template&id=c6bdc170&scoped=true& (app.js:1088), <anonymous>:32:24)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6911)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6911
michaelolof commented 5 years ago

Please update to v2.2.1 and try again Apologies

saniales commented 5 years ago

Solved