feat: add store module (#4)

package.json

@@ -20,6 +20,7 @@
     "date-fns": "^2.28.0",
     "lodash-es": "^4.17.21",
     "pinia": "^2.0.14",
+    "pinia-plugin-persist": "^1.0.0",
     "vue": "^3.2.33",
     "vue-router": "^4.0.16"
   },

src/main.ts

@@ -5,7 +5,7 @@ import '@/theme/index.less'
 import { createApp } from 'vue'
 import { idux } from './plugins'
 import router from './router'
-import { store } from './store'
+import store from './store'
 import App from './App.vue'
 
 createApp(App).use(idux).use(store).use(router).mount('#app')

src/store/index.ts

@@ -1,3 +1,12 @@
 import { createPinia } from 'pinia'
+import { App } from 'vue'
+import piniaPersist from 'pinia-plugin-persist'
 
-export const store = createPinia()
+const store = createPinia()
+
+const install = (app: App): void => {
+  store.use(piniaPersist)
+
+  app.use(store)
+}
+export default { install }

src/store/stores/appSetting.ts

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export type ThemeType = 'light' | 'dark'
+
+export const useAppSettingStore = defineStore(
+  'appSetting',
+  () => {
+    const appTheme = ref<ThemeType>('light')
+    const loading = ref<number>()
+
+    /**
+     * 修改系统主题
+     */
+    function changeTheme(theme: ThemeType) {
+      appTheme.value = theme
+    }
+    function changeLoadingProgress(progress: number) {
+      loading.value = progress
+    }
+    return {
+      theme: appTheme,
+      loading,
+      changeLoadingProgress,
+      changeTheme,
+    }
+  },
+  {
+    persist: {
+      enabled: true,
+      strategies: [{ storage: localStorage, paths: ['appTheme'] }],
+    },
+  },
+)

src/store/stores/index.ts

@@ -0,0 +1,17 @@
+import { useAppSettingStore } from './appSetting'
+
+// const allModules = import.meta.globEager('./**/*.ts')
+
+// Object.keys(allModules).forEach(path => {
+//   const fileName = path.split('/')[1]
+//   const module = allModules[path][fileName] || allModules[path].default || allModules[path]
+//   Object.getOwnPropertyNames(module)
+//     .filter(item => item.match(/^use/))
+//     .forEach(item => {
+//       appStore[item] = module[item]
+//     })
+// })
+
+export default {
+  useAppSettingStore,
+}

src/store/stores/user.ts

@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useUserStore = defineStore(
+  'user',
+  () => {
+    const token = ref<string>('')
+    const userInfo = ref<object>()
+
+    async function login() {}
+    async function logout() {}
+
+    async function getUserInfo() {
+      return userInfo.value
+    }
+
+    return {
+      token,
+      login,
+      logout,
+      getUserInfo,
+    }
+  },
+  {
+    persist: {
+      enabled: true,
+      strategies: [{ storage: localStorage, paths: ['token', 'userInfo'] }],
+    },
+  },
+)

src/store/utils/index.ts

@@ -0,0 +1,20 @@
+/**
+ * 重构$reset()
+ * @desc 因为setup模式编程不支持reset方法，这里要手动重构
+ * @param appStore
+ */
+export const installResetFunc = (appStore: object): void =>
+  Object.values(appStore).forEach(item => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const initState = {} as Record<string, any>
+    if (item) {
+      Object.entries(item.$state).forEach(item => {
+        initState[item[0]] = item[1]
+      })
+      item.reset = () => {
+        Object.keys(item.$state).forEach(state => {
+          item.$state[state] = initState[state]
+        })
+      }
+    }
+  })

tsconfig.json

@@ -10,7 +10,7 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "lib": ["esnext", "dom"],
-
+    "types": ["pinia-plugin-persist"],
     "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"]