workflow: use pinia replace vuex and fix some bug

src/store/modules/app.ts

@@ -1,58 +1,64 @@
-import { storageLocal } from "../../utils/storage"
-interface stateInter {
+import { storageLocal } from "../../utils/storage";
+import { defineStore } from "pinia";
+import { store } from "/@/store";
+
+interface AppState {
   sidebar: {
-    opened: Boolean,
-    withoutAnimation: Boolean
-  },
-  device: String
+    opened: Boolean;
+    withoutAnimation: Boolean;
+  };
+  device: String;
 }
 
-const state = {
-  sidebar: {
-    opened: storageLocal.getItem('sidebarStatus') ? !!+storageLocal.getItem('sidebarStatus') : true,
-    withoutAnimation: false
+export const useAppStore = defineStore({
+  id: "pure-app",
+  state: (): AppState => ({
+    sidebar: {
+      opened: storageLocal.getItem("sidebarStatus")
+        ? !!+storageLocal.getItem("sidebarStatus")
+        : true,
+      withoutAnimation: false,
+    },
+    device: "desktop",
+  }),
+  getters: {
+    getSidebarStatus() {
+      return this.sidebar.opened;
+    },
+    getDevice() {
+      return this.device;
+    },
   },
-  device: 'desktop'
-}
+  actions: {
+    TOGGLE_SIDEBAR() {
+      this.sidebar.opened = !this.sidebar.opened;
+      this.sidebar.withoutAnimation = false;
+      if (this.sidebar.opened) {
+        storageLocal.setItem("sidebarStatus", 1);
+      } else {
+        storageLocal.setItem("sidebarStatus", 0);
+      }
+    },
+    CLOSE_SIDEBAR(withoutAnimation: Boolean) {
+      storageLocal.setItem("sidebarStatus", 0);
+      this.sidebar.opened = false;
+      this.sidebar.withoutAnimation = withoutAnimation;
+    },
+    TOGGLE_DEVICE(device: String) {
+      this.device = device;
+    },
+    async toggleSideBar() {
+      await this.TOGGLE_SIDEBAR();
+    },
+    closeSideBar(withoutAnimation) {
+      this.CLOSE_SIDEBAR(withoutAnimation);
+    },
+    toggleDevice(device) {
+      this.TOGGLE_DEVICE(device);
+    },
+  },
+});
 
-const mutations = {
-  TOGGLE_SIDEBAR: (state: stateInter): void => {
-    state.sidebar.opened = !state.sidebar.opened
-    state.sidebar.withoutAnimation = false
-     if (state.sidebar.opened) {
-      storageLocal.setItem('sidebarStatus', 1)
-    } else {
-      storageLocal.setItem('sidebarStatus', 0)
-    }
-  },
-  CLOSE_SIDEBAR: (state: stateInter, withoutAnimation: Boolean) => {
-    storageLocal.setItem('sidebarStatus', 0)
-    state.sidebar.opened = false
-    state.sidebar.withoutAnimation = withoutAnimation
-  },
-  TOGGLE_DEVICE: (state: stateInter, device: String) => {
-    state.device = device
-  }
-}
-
-const actions = {
-  // @ts-ignore
-  toggleSideBar({ commit }) {
-    commit('TOGGLE_SIDEBAR')
-  },
-  // @ts-ignore
-  closeSideBar({ commit }, { withoutAnimation }) {
-    commit('CLOSE_SIDEBAR', withoutAnimation)
-  },
-  // @ts-ignore
-  toggleDevice({ commit }, device) {
-    commit('TOGGLE_DEVICE', device)
-  }
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
+export function useAppStoreHook() {
+  return useAppStore(store);
 }