renderer: add counter example

src/renderer/screens/MainScreen.vue

@@ -2,9 +2,13 @@
 import { useI18n } from 'vue-i18n'
 import { useTheme } from 'vuetify'
 import Utils from '@/renderer/utils'
+import { useTempStore } from '@/renderer/store/temp'
+import { storeToRefs } from 'pinia'
 
 const { locale } = useI18n()
 const theme = useTheme()
+const { counterIncrease } = useTempStore()
+const { counter } = storeToRefs(useTempStore())
 
 const handleChangeTheme = (): void => {
   theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
@@ -21,6 +25,10 @@ const handleChangeLanguage = (): void => {
 const handleAbout = async (): Promise<void> => {
   await Utils.openExternal('https://github.com/jooy2/vutron')
 }
+
+const handleCountIncrease = (): void => {
+  counterIncrease(1)
+}
 </script>
 
 <template>
@@ -32,21 +40,25 @@ const handleAbout = async (): Promise<void> => {
       <v-col cols="12">
         {{ $t('desc.welcome') }}
       </v-col>
-      <v-col cols="4">
+      <v-col cols="12"> Counter: {{ counter }} </v-col>
+      <v-col cols="33">
         <v-btn block color="primary" @click="handleChangeTheme">
           {{ $t('menu.change-theme') }}
         </v-btn>
       </v-col>
-      <v-col cols="4">
+      <v-col cols="3">
         <v-btn block color="primary" @click="handleChangeLanguage">
           {{ $t('menu.change-language') }}
         </v-btn>
       </v-col>
-      <v-col cols="4">
+      <v-col cols="3">
         <v-btn block color="primary" @click="handleAbout">
           {{ $t('menu.about') }}
         </v-btn>
       </v-col>
+      <v-col cols="3">
+        <v-btn block color="primary" @click="handleCountIncrease">Count + 1</v-btn>
+      </v-col>
     </v-row>
   </v-container>
 </template>

src/renderer/store/temp.ts

@@ -2,14 +2,14 @@ import { defineStore } from 'pinia'
 
 export const useTempStore = defineStore('temp', {
   state: () => ({
-    text: 'Sample Text'
+    counter: 0
   }),
   getters: {
-    getText: (state) => state.text
+    getCounter: (state): number => state.counter
   },
   actions: {
-    setText(text) {
+    counterIncrease(amount: number) {
-      this.text = text
+      this.counter += amount
     }
   }
 })