upd: main store use

Author: vikdiesel

src/layouts/LayoutAuthenticated.vue

@@ -4,7 +4,6 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import menuAside from '@/menuAside.js'
 import menuNavBar from '@/menuNavBar.js'
-import { useMainStore } from '@/stores/main.js'
 import { useStyleStore } from '@/stores/style.js'
 import BaseIcon from '@/components/BaseIcon.vue'
 import FormControl from '@/components/FormControl.vue'
@@ -13,13 +12,6 @@ import NavBarItemPlain from '@/components/NavBarItemPlain.vue'
 import AsideMenu from '@/components/AsideMenu.vue'
 import FooterBar from '@/components/FooterBar.vue'
 
-useMainStore().setUser({
-  name: 'John Doe',
-  email: '[email protected]',
-  avatar:
-    'https://avatars.dicebear.com/api/avataaars/example.svg?options[top][]=shortHair&options[accessoriesChance]=93'
-})
-
 const layoutAsidePadding = 'xl:pl-60'
 
 const styleStore = useStyleStore()

src/main.js

@@ -20,8 +20,8 @@ const mainStore = useMainStore(pinia)
 const styleStore = useStyleStore(pinia)
 
 /* Fetch sample data */
-mainStore.fetch('clients')
-mainStore.fetch('history')
+mainStore.fetchSampleClients()
+mainStore.fetchSampleHistory()
 
 /* App style */
 styleStore.setStyle(localStorage[styleKey] ?? 'basic')

src/stores/main.js

@@ -1,44 +1,69 @@
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 import axios from 'axios'
 
-export const useMainStore = defineStore('main', {
-  state: () => ({
-    /* User */
-    userName: null,
-    userEmail: null,
-    userAvatar: null,
-
-    /* Field focus with ctrl+k (to register only once) */
-    isFieldFocusRegistered: false,
-
-    /* Sample data (commonly used) */
-    clients: [],
-    history: []
-  }),
-  actions: {
-    setUser(payload) {
-      if (payload.name) {
-        this.userName = payload.name
-      }
-      if (payload.email) {
-        this.userEmail = payload.email
-      }
-      if (payload.avatar) {
-        this.userAvatar = payload.avatar
-      }
-    },
-
-    fetch(sampleDataKey) {
-      axios
-        .get(`data-sources/${sampleDataKey}.json`)
-        .then((r) => {
-          if (r.data && r.data.data) {
-            this[sampleDataKey] = r.data.data
-          }
-        })
-        .catch((error) => {
-          alert(error.message)
-        })
+export const useMainStore = defineStore('main', () => {
+  const userName = ref('john doe')
+  const userEmail = ref('[email protected]')
+  const userAvatar = ref('https://avatars.dicebear.com/api/avataaars/example.svg')
+
+  // ... or you can use computed:
+  // const userAvatar = computed(
+  //   () =>
+  //     `https://avatars.dicebear.com/api/avataaars/${userName.value.replace(
+  //       /[^a-z0-9]+/i,
+  //       ''
+  //     )}.svg`
+  // )
+
+  const isFieldFocusRegistered = ref(false)
+
+  const clients = ref([])
+  const history = ref([])
+
+  function setUser(payload) {
+    if (payload.name) {
+      userName.value = payload.name
+    }
+    if (payload.email) {
+      userEmail.value = payload.email
+    }
+    if (payload.avatar) {
+      userAvatar.value = payload.avatar
     }
   }
+
+  function fetchSampleClients() {
+    axios
+      .get(`data-sources/clients.json`)
+      .then((result) => {
+        clients.value = result?.data?.data
+      })
+      .catch((error) => {
+        alert(error.message)
+      })
+  }
+
+  function fetchSampleHistory() {
+    axios
+      .get(`data-sources/history.json`)
+      .then((result) => {
+        history.value = result?.data?.data
+      })
+      .catch((error) => {
+        alert(error.message)
+      })
+  }
+
+  return {
+    userName,
+    userEmail,
+    userAvatar,
+    isFieldFocusRegistered,
+    clients,
+    history,
+    setUser,
+    fetchSampleClients,
+    fetchSampleHistory
+  }
 })