update vuex-class to standard

Lyduz · Apr 7, 2020 · 9c5a7a1 · 9c5a7a1
1 parent f86fa95
commit 9c5a7a1
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/app/modules/chart/views/chart.vue b/app/modules/chart/views/chart.vue
@@ -20,20 +20,20 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
-import { Getter, namespace } from "vuex-class";
+import { Vue, Component } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
 
-const STORE_CHART = namespace("chart");
+const STORE_CHART = namespace('chart')
 
 @Component
 export default class Chart extends Vue {
-  @STORE_CHART.Getter("title") storeChart_title?: string;
+  @STORE_CHART.Getter('getTitle') chart_get_title!: string
 
   // data
-  title = "Chart Page";
+  title = 'Chart Page'
 
   mounted() {
-    console.log(`Mounted: ${this.storeChart_title}`);
+    console.log(`Mounted: ${this.chart_get_title}`)
   }
 }
 </script>

diff --git a/app/modules/home/views/home.vue b/app/modules/home/views/home.vue
@@ -17,28 +17,36 @@
 
 <script lang="ts">
 import { Vue, Component } from 'vue-property-decorator'
-import { Getter, Action, namespace } from 'vuex-class'
+import { namespace } from 'vuex-class'
 
 const STORE_SOCIAL = namespace('social')
 const STORE_CHART = namespace('chart')
 
 @Component
 export default class Home extends Vue {
-  // getters
-  @STORE_SOCIAL.Getter('title') storeSocial_title?: any
-  // setters
-  @STORE_SOCIAL.Action('setTitle') storeSocial_setTitle?: any
-  @STORE_CHART.Action('setTitle') storeChart_setTitle?: any
+  // social store
+  @STORE_SOCIAL.State('title') social_title!: string
+  @STORE_SOCIAL.Action('setTitle') social_set_title!: (payload: string) => void
 
+  // chart store
+  @STORE_CHART.Action('setTitle') chart_set_title!: (payload: string) => void
+
+  /**
+   * Navigate to view.
+   *
+   * @param   {string}  route
+   *
+   * @return
+   */
   goTo(route: string): void {
     //store in state
-    this.storeSocial_setTitle('Social Page')
+    this.social_set_title('Social Page')
     // @ts-ignore
     this.$navigator.navigate(`/${route}`)
   }
 
   mounted() {
-    this.storeChart_setTitle('Chart Page')
+    this.chart_set_title('Chart Page')
   }
 }
 </script>

diff --git a/app/modules/social/views/social.vue b/app/modules/social/views/social.vue
@@ -6,44 +6,42 @@
         android.systemIcon="ic_menu_back"
         @tap="$navigator.navigate('/home')"
       />
-      <Label :text="storeSocial_title" class="title"/>
+      <Label :text="social_get_title" class="title" />
     </ActionBar>
 
     <StackLayout
       orientation="vertical"
       horizontalAlignment="center"
       verticalAlignment="center"
     >
-        <Label :text="storeSocial_title" class="header" /> 
-        <Label text="generated via store vuex" /> 
+      <Label :text="social_get_title" class="header" />
+      <Label text="generated via store vuex" />
     </StackLayout>
   </Page>
 </template>
 
 <script lang="ts">
-import { Vue, Component } from "vue-property-decorator";
-import { Getter, namespace } from "vuex-class";
+import { Vue, Component } from 'vue-property-decorator'
+import { namespace } from 'vuex-class'
 
-const STORE_SOCIAL = namespace("social");
+const STORE_SOCIAL = namespace('social')
 
 @Component
 export default class Social extends Vue {
-    
-    // getter
-    @STORE_SOCIAL.Getter('title') storeSocial_title?: string;
-
+  // getter
+  @STORE_SOCIAL.Getter('getTitle') social_get_title!: string
 }
 </script>
 
 <style scoped>
 ActionBar {
-  background-color: #03DAC5;
+  background-color: #03dac5;
   color: #000000;
 }
-.title{
+.title {
   font-size: 20%;
 }
-.header{
+.header {
   font-size: 35%;
 }
 </style>