refact: change vuex to pinia

- change all components to script setup syntax

.gitignore

@@ -22,7 +22,6 @@ npm-debug.log*
 /.sass-cache
 /.sourcemaps
 /.versions
-/.vscode
 /coverage
 /dist
 /node_modules

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  }
+}

package.json

@@ -36,9 +36,9 @@
     "axios": "^0.21.1",
     "ionicons": "^5.5.3",
     "mitt": "^2.1.0",
+    "pinia": "^2.1.6",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.5",
-    "vuex": "^4.0.2"
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@capacitor/cli": "^5.4.1",

src/App.vue

@@ -7,20 +7,7 @@
   </IonApp>
 </template>
 
-<script>
+<script setup>
 import { IonApp, IonRouterOutlet, IonSplitPane } from "@ionic/vue";
-
-import { defineComponent } from "vue";
-
 import Menu from "./components/Menu.vue";
-
-export default defineComponent({
-  name: "App",
-  components: {
-    IonApp,
-    IonRouterOutlet,
-    IonSplitPane,
-    Menu,
-  },
-});
 </script>

src/components/Button.vue

@@ -29,100 +29,84 @@
   </ion-button>
 </template>
 
-<script>
+<script setup>
 import {
   IonButton,
   IonLabel,
   IonIcon,
   IonSpinner,
   IonRippleEffect,
 } from "@ionic/vue";
+import { defineProps, computed } from "vue";
 import { useRouter } from "vue-router";
 
-export default {
-  name: "Button",
-  components: {
-    IonButton,
-    IonLabel,
-    IonIcon,
-    IonSpinner,
-    IonRippleEffect,
+const props = defineProps({
+  color: {
+    type: String,
+    default: "primary",
   },
-  props: {
-    color: {
-      type: String,
-      default: "primary",
-    },
-    text: {
-      type: String,
-      required: false,
-    },
-    expand: {
-      type: String,
-      default: "block",
-    },
-    size: {
-      type: String,
-      default: "medium",
-    },
-    icon: {
-      default: null,
-      required: false,
-    },
-    iosIcon: {
-      default: null,
-      required: false,
-    },
-    mdIcon: {
-      default: null,
-      required: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    spinnerName: {
-      type: String,
-      default: "crescent",
-    },
-    iconOnly: {
-      type: Boolean,
-      default: false,
-    },
-    fill: {
-      type: String,
-      default: "solid",
-    },
-    to: {
-      required: false,
-    },
-    download: {
-      type: Boolean,
-      default: false,
-    },
-    href: {
-      type: String,
-      required: false,
-    },
+  text: {
+    type: String,
+    required: false,
   },
-  setup() {
-    const router = useRouter();
-
-    return { router };
+  expand: {
+    type: String,
+    default: "block",
   },
-  computed: {
-    hasIcon() {
-      return this.icon || this.iosIcon || this.mdIcon;
-    },
+  size: {
+    type: String,
+    default: "medium",
   },
-  methods: {
-    redirectToRoute() {
-      if (!this.to) {
-        return;
-      }
-
-      this.router.push(this.to);
-    },
+  icon: {
+    default: null,
+    required: false,
+  },
+  iosIcon: {
+    default: null,
+    required: false,
+  },
+  mdIcon: {
+    default: null,
+    required: false,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  spinnerName: {
+    type: String,
+    default: "crescent",
+  },
+  iconOnly: {
+    type: Boolean,
+    default: false,
+  },
+  fill: {
+    type: String,
+    default: "solid",
   },
-};
+  to: {
+    required: false,
+  },
+  download: {
+    type: Boolean,
+    default: false,
+  },
+  href: {
+    type: String,
+    required: false,
+  },
+});
+
+const hasIcon = computed(() => {
+  return props.icon || props.iosIcon || props.mdIcon;
+});
+
+const router = useRouter();
+
+function redirectToRoute() {
+  if (!this.to) return;
+
+  router.push(this.to);
+}
 </script>

src/components/Divider.vue

@@ -6,16 +6,8 @@
   </ion-row>
 </template>
 
-<script>
+<script setup>
 import { IonCol, IonRow } from "@ionic/vue";
-
-export default {
-  name: "Divider",
-  components: {
-    IonCol,
-    IonRow,
-  },
-};
 </script>
 
 <style scoped>

src/components/ErrorMessage.vue

@@ -4,18 +4,14 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { IonText } from "@ionic/vue";
+import { defineProps } from "vue";
 
-export default {
-  name: "ErrorMessage",
-  components: {
-    IonText,
+defineProps({
+  text: {
+    type: String,
+    default: "Something went wrong",
   },
-  props: {
-    text: {
-      type: String,
-    },
-  },
-};
+});
 </script>