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
NOTE: Everything works in version 2.1.1: I suggest a revert
from this example
creating a proxy of this component like this fails
Here a copy of the stack trace
Let's move to actions now
given the following
if you use it it breaks
Here the stack trace