vuex-class

Author: Laoujin

cli-socks/package.json

@@ -13,7 +13,8 @@
     "vue-class-component": "^6.0.0",
     "vue-property-decorator": "^8.0.0",
     "vue-router": "^3.0.1",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "vuex-class": "^0.3.2"
   },
   "devDependencies": {
     "@types/jest": "^23.1.4",

cli-socks/src/store.ts

@@ -13,7 +13,11 @@ export default new Vuex.Store({
   actions: {},
 
   // ~ component.computed
-  getters: {},
+  getters: {
+    countAlias(state) {
+      return state.count;
+    }
+  },
 
   // ~ redux.actions
   mutations: {

cli-socks/src/views/Counter.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="counter">
     <h1>Vuex Counter</h1>
-    <p>{{ count }}</p>
+    <p>{{ countAlias }}</p>
     <p>
       <button @click="increment">+</button>
       <button @click="decrement">-</button>
@@ -11,21 +11,23 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { mapState, mapGetters } from 'vuex';
+//import { mapState, mapGetters } from 'vuex';
+import { State, Getter, Action, Mutation, namespace } from 'vuex-class';
 
 @Component
 export default class Counter extends Vue {
   get count(): number {
     return this.$store.state.count;
   }
 
+  @Getter countAlias!: number;
+
+
   increment(): void {
     this.$store.commit('increment');
   }
 
-  decrement(): void {
-    this.$store.commit('decrement');
-  }
+  @Mutation decrement!: Function;
 }
 </script>
 

cli-socks/tsconfig.json

@@ -7,6 +7,7 @@
     "importHelpers": true,
     "moduleResolution": "node",
     "experimentalDecorators": true,
+    "allowJs": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,