feat: new store

d2-admin/components/d2-admin/layout/header-aside/index.vue

@@ -21,7 +21,7 @@
     <slot/>
   </div>
   <div class="layout-header-aside__header" :style="headerStyle">
-    <button @click="countIncrease">click | {{ count }}</button>
+    header
   </div>
   <div class="layout-header-aside__aside" :style="asideStyle">
     <d2-admin-layout-header-aside-menu-vertical/>
@@ -33,14 +33,6 @@ import { computed, ref } from 'vue'
 import { px } from 'd2-projects/d2-utils/css.js'
 import { useCssPosition } from 'd2-projects/d2-use/use-css-position.js'
 
-import { useStore } from 'd2-admin/store/index.js'
-import { countStore } from 'd2-admin/store/modules/count.js'
-
-const {
-  count,
-  countIncrease
-} = useStore(countStore)
-
 const headerHeight = ref(50)
 const asideWidth = ref(200)
 

d2-admin/components/d2-admin/layout/header-aside/menu/vertical.jsx

@@ -1,23 +1,28 @@
 import { defineComponent, computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { useStore } from 'd2-admin/store/index.js'
-import { menuMainStore } from 'd2-admin/store/modules/menu-main.js'
 import { useMenu } from 'd2-admin/use/menu.js'
 import { getMenuId } from 'd2-admin/utils/menu.js'
 import { renderMenus } from './render.jsx'
 
+import { storeToRefs } from 'pinia'
+import { useStoreOfMenuMain } from 'd2-admin/store/menu-main.js'
+
 export default defineComponent({
   setup () {
     const route = useRoute()
+    const store = useStoreOfMenuMain()
+
+    const { menus } = storeToRefs(store)
+
+    console.log(store.getMenuByUrl)
 
-    const { menus, getMenuById, getMenuByUrl } = useStore(menuMainStore)
     const { navigateByMenu } = useMenu()
 
     function onSelect (id) {
-      navigateByMenu(getMenuById(id))
+      navigateByMenu(store.getMenuById(id))
     }
 
-    const defaultActive = computed(() => getMenuId(getMenuByUrl(route.fullPath)))
+    const defaultActive = computed(() => getMenuId(store.getMenuByUrl(route.fullPath)))
 
     return {
       menus,

d2-admin/store/index.js

@@ -1,15 +0,0 @@
-import { registerModules, getModule } from './utils/index.js'
-
-// modules
-
-import { countStore } from './modules/count.js'
-import { menuSecondaryStore } from './modules/menu-secondary.js'
-import { menuMainStore } from './modules/menu-main.js'
-
-export const useStore = getModule
-
-export const creatStore = () => registerModules([
-  countStore,
-  menuSecondaryStore,
-  menuMainStore
-])

d2-admin/store/menu-main.js

@@ -0,0 +1,31 @@
+import { defineStore } from 'pinia'
+import { fromPairs } from 'lodash-es'
+import { flattenMenus, getMenuId, getMenuUrl } from 'd2-admin/utils/menu.js'
+
+export const useStoreOfMenuMain = defineStore('menu-main', {
+  state: () => ({
+    menus: []
+  }),
+  getters: {
+    flatMenus () {
+      return flattenMenus(this.menus)
+    },
+    flatMenusIdIndex () {
+      return fromPairs(this.flatMenus.map((e, i) => [getMenuId(e), i]))
+    },
+    flatMenusUrlIndex () {
+      return fromPairs(this.flatMenus.map((e, i) => [getMenuUrl(e), i]))
+    }
+  },
+  actions: {
+    setMenus (value) {
+      this.menus = value
+    },
+    getMenuById (id) {
+      return this.flatMenus[this.flatMenusIdIndex[id]]
+    },
+    getMenuByUrl (url) {
+      return this.flatMenus[this.flatMenusUrlIndex[url]]
+    }
+  }
+})

d2-admin/store/modules/count.js

@@ -1,14 +0,0 @@
-import { ref } from 'vue'
-
-export function countStore () {
-  const count = ref(0)
-
-  function countIncrease () {
-    count.value ++
-  }
-
-  return {
-    count,
-    countIncrease
-  }
-}

d2-admin/store/modules/menu-main.js

@@ -1,3 +0,0 @@
-import { menuStore } from './menu.js'
-
-export const menuMainStore = () => menuStore()

d2-admin/store/modules/menu-secondary.js

@@ -1,3 +0,0 @@
-import { menuStore } from './menu.js'
-
-export const menuSecondaryStore = () => menuStore()

d2-admin/store/modules/menu.js

@@ -1,52 +0,0 @@
-import { fromPairs } from 'lodash-es'
-import { shallowRef, unref, computed } from 'vue'
-import { flattenMenus, getMenuId, getMenuUrl } from 'd2-admin/utils/menu.js'
-
-export function menuStore () {
-  // [ tree, ... ]
-  const menus = shallowRef([])
-
-  // [ menu, ... ]
-  const flatMenus = computed(() => flattenMenus(unref(menus)))
-
-  // { id: index, ... }
-  const flatMenusIdIndex = computed(() => fromPairs(unref(flatMenus).map((e, i) => [getMenuId(e), i])))
-  // { url: index, ... }
-  const flatMenusUrlIndex = computed(() => fromPairs(unref(flatMenus).map((e, i) => [getMenuUrl(e), i])))
-  
-  /**
-   * Set menus value
-   * @param {array} value menus
-   */
-  function setMenus (value) {
-    menus.value = value
-  }
-
-  /**
-   * Find menu item by menu id
-   * @param {string} id menu id
-   * @returns menu item
-   */
-  function getMenuById (id) {
-    return unref(flatMenus)[unref(flatMenusIdIndex)[id]]
-  }
-
-  /**
-   * Find menu item by menu url
-   * @param {string} url menu url
-   * @returns menu item
-   */
-   function getMenuByUrl (url) {
-    return unref(flatMenus)[unref(flatMenusUrlIndex)[url]]
-  }
-
-  return {
-    menus,
-    flatMenus,
-    flatMenusIdIndex,
-    flatMenusUrlIndex,
-    setMenus,
-    getMenuById,
-    getMenuByUrl
-  }
-}

d2-admin/store/utils/index.js

@@ -1,22 +0,0 @@
-import { fromPairs } from 'lodash'
-import { provide, inject } from 'vue'
-
-function registerModule (hook) {
-  !hook.token && (hook.token = Symbol('store'))
-  const depends = hook()
-  provide(hook.token, depends)
-  return depends
-}
-
-export const registerModules = hooks => fromPairs(
-  hooks.map(hook => [
-    hook.name,
-    registerModule(hook)
-  ])
-)
-
-export function getModule (hook) {
-  const injected = inject(hook.token)
-  if (injected) return injected
-  throw new Error(`hook 函数 ${ hook.name } 未在上层组件通过 registerModule 或 registerModules 注册`)
-}

src/App.vue

@@ -5,12 +5,10 @@
 </template>
 
 <script setup>
-import { creatStore } from 'd2-admin/store/index.js'
+import { useStoreOfMenuMain } from 'd2-admin/store/menu-main.js'
 import { menusAside } from '@/menus/index.js'
 
-const { menuMainStore } = creatStore()
+const menuMainStore = useStoreOfMenuMain()
 
-const { setMenus } = menuMainStore
-
-setMenus(menusAside)
+menuMainStore.setMenus(menusAside)
 </script>

src/views/dashboard/document/page1.vue

@@ -1,14 +1,3 @@
 <template>
   <p>document / page 1</p>
-  <button @click="countIncrease">click | {{ count }}</button>
 </template>
-
-<script setup>
-import { useStore } from 'd2-admin/store/index.js'
-import { countStore } from 'd2-admin/store/modules/count.js'
-
-const {
-  count,
-  countIncrease
-} = useStore(countStore)
-</script>