chore: vuex 替换为 pinia

package.json

@@ -1,6 +1,6 @@
 {
   "name": "v3-admin",
-  "version": "3.0.7",
+  "version": "3.1.0-rc.1",
   "homepage": "https://github.com/un-pany/v3-admin",
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -21,10 +21,10 @@
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.2.0",
+    "pinia": "^2.0.12",
     "screenfull": "^6.0.1",
     "vue": "^3.2.31",
-    "vue-router": "^4.0.14",
-    "vuex": "^4.0.2"
+    "vue-router": "^4.0.14"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.1",

src/App.vue

@@ -7,6 +7,9 @@
 <script lang="ts" setup>
 import { ElConfigProvider } from 'element-plus'
 import zhCn from 'element-plus/lib/locale/lang/zh-cn'
+import { useAppStore } from '@/store/modules/app'
 
-const locale = zhCn // Element UI 默认中文
+const locale = zhCn // Element Plus 设置为中文
+
+useAppStore().initTheme() // 初始化 Theme
 </script>

src/components/theme-switch/index.vue

@@ -23,15 +23,16 @@
 <script lang="ts" setup>
 import { MagicStick } from '@element-plus/icons-vue'
 import { computed } from 'vue'
-import { store } from '@/store'
+import { useAppStore } from '@/store/modules/app'
 
+const appStore = useAppStore()
 const themeList = computed(() => {
-  return store.state.app.themeList
+  return appStore.themeList
 })
 const activeThemeName = computed(() => {
-  return store.state.app.activeThemeName
+  return appStore.activeThemeName
 })
 const handleSetTheme = (name: string) => {
-  store.commit('app/SET_THEME', name)
+  appStore.setTheme(name)
 }
 </script>

src/directives/permission/index.ts

@@ -1,11 +1,11 @@
-import { store } from '@/store'
+import { useUserStoreHook } from '@/store/modules/user'
 import { Directive } from 'vue'
 
 /** 权限指令 */
 export const permission: Directive = {
   mounted(el, binding) {
     const { value } = binding
-    const roles = store.state.user.roles
+    const roles = useUserStoreHook().roles
     if (value && value instanceof Array && value.length > 0) {
       const permissionRoles = value
       const hasPermission = roles.some((role: any) => {
@@ -15,7 +15,7 @@ export const permission: Directive = {
         el.style.display = 'none'
       }
     } else {
-      throw new Error('need roles! Like v-permission="[\'admin\',\'editor\']"')
+      throw new Error("need roles! Like v-permission=\"['admin','editor']\"")
     }
   }
 }

src/layout/components/navigation-bar/index.vue

@@ -36,28 +36,33 @@
 import { UserFilled } from '@element-plus/icons-vue'
 import { computed, reactive } from 'vue'
 import { useRouter } from 'vue-router'
-import { store } from '@/store'
+import { useAppStore } from '@/store/modules/app'
+import { useSettingsStore } from '@/store/modules/settings'
+import { useUserStore } from '@/store/modules/user'
 import BreadCrumb from '../bread-crumb/index.vue'
 import Hamburger from '../hamburger/index.vue'
 import ThemeSwitch from '@/components/theme-switch/index.vue'
 import Screenfull from '@/components/screenfull/index.vue'
 
 const router = useRouter()
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const userStore = useUserStore()
 const sidebar = computed(() => {
-  return store.state.app.sidebar
+  return appStore.sidebar
 })
 const showThemeSwitch = computed(() => {
-  return store.state.settings.showThemeSwitch
+  return settingsStore.showThemeSwitch
 })
 const showScreenfull = computed(() => {
-  return store.state.settings.showScreenfull
+  return settingsStore.showScreenfull
 })
 const state = reactive({
   toggleSideBar: () => {
-    store.commit('app/TOGGLE_SIDEBAR', false)
+    appStore.toggleSidebar(false)
   },
   logout: () => {
-    store.dispatch('user/logout')
+    userStore.logout()
     router.push('/login').catch((err) => {
       console.warn(err)
     })

src/layout/components/settings/index.vue

@@ -30,21 +30,23 @@
 </template>
 
 <script lang="ts" setup>
-import { store } from '@/store'
+import { useSettingsStore } from '@/store/modules/settings'
 import { reactive, watch } from 'vue'
 
+const settingsStore = useSettingsStore()
+
 const state = reactive({
-  fixedHeader: store.state.settings.fixedHeader,
-  showTagsView: store.state.settings.showTagsView,
-  showSidebarLogo: store.state.settings.showSidebarLogo,
-  showThemeSwitch: store.state.settings.showThemeSwitch,
-  showScreenfull: store.state.settings.showScreenfull
+  fixedHeader: settingsStore.fixedHeader,
+  showTagsView: settingsStore.showTagsView,
+  showSidebarLogo: settingsStore.showSidebarLogo,
+  showThemeSwitch: settingsStore.showThemeSwitch,
+  showScreenfull: settingsStore.showScreenfull
 })
 
 watch(
   () => state.fixedHeader,
   (value) => {
-    store.commit('settings/CHANGE_SETTING', {
+    settingsStore.changeSetting({
       key: 'fixedHeader',
       value
     })
@@ -54,7 +56,7 @@ watch(
 watch(
   () => state.showTagsView,
   (value) => {
-    store.commit('settings/CHANGE_SETTING', {
+    settingsStore.changeSetting({
       key: 'showTagsView',
       value
     })
@@ -64,7 +66,7 @@ watch(
 watch(
   () => state.showSidebarLogo,
   (value) => {
-    store.commit('settings/CHANGE_SETTING', {
+    settingsStore.changeSetting({
       key: 'showSidebarLogo',
       value
     })
@@ -74,7 +76,7 @@ watch(
 watch(
   () => state.showThemeSwitch,
   (value) => {
-    store.commit('settings/CHANGE_SETTING', {
+    settingsStore.changeSetting({
       key: 'showThemeSwitch',
       value
     })
@@ -84,7 +86,7 @@ watch(
 watch(
   () => state.showScreenfull,
   (value) => {
-    store.commit('settings/CHANGE_SETTING', {
+    settingsStore.changeSetting({
       key: 'showScreenfull',
       value
     })

src/layout/components/sidebar/index.vue

@@ -26,19 +26,21 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { store } from '@/store'
+import { useAppStore } from '@/store/modules/app'
+import { usePermissionStore } from '@/store/modules/permission'
+import { useSettingsStore } from '@/store/modules/settings'
 import SidebarItem from './sidebar-item.vue'
 import SidebarLogo from './sidebar-logo.vue'
 
 const route = useRoute()
 const sidebar = computed(() => {
-  return store.state.app.sidebar
+  return useAppStore().sidebar
 })
 const routes = computed(() => {
-  return store.state.permission.routes
+  return usePermissionStore().routes
 })
 const showLogo = computed(() => {
-  return store.state.settings.showSidebarLogo
+  return useSettingsStore().showSidebarLogo
 })
 const activeMenu = computed(() => {
   const { meta, path } = route

src/layout/components/tags-view/index.vue

@@ -48,13 +48,15 @@
 
 <script lang="ts" setup>
 import path from 'path'
-import { store } from '@/store'
-import { ITagView } from '@/store/modules/tags-view'
+import { useTagsViewStore, ITagView } from '@/store/modules/tags-view'
+import { usePermissionStore } from '@/store/modules/permission'
 import { computed, getCurrentInstance, nextTick, onBeforeMount, reactive, watch } from 'vue'
 import { RouteRecordRaw, useRoute, useRouter } from 'vue-router'
 import ScrollPane from './scroll-pane.vue'
 import { Close } from '@element-plus/icons-vue'
 
+const tagsViewStore = useTagsViewStore()
+const permissionStore = usePermissionStore()
 const router = useRouter()
 const instance = getCurrentInstance()
 const currentRoute = useRoute()
@@ -102,9 +104,9 @@ const state = reactive({
     })
   },
   closeSelectedTag: (view: ITagView) => {
-    store.commit('tagsView/DEL_VISITED_VIEW', view)
+    tagsViewStore.delVisitedView(view)
     if (state.isActive(view)) {
-      toLastView(store.state.tagsView.visitedViews, view)
+      toLastView(tagsViewStore.visitedViews, view)
     }
   },
   closeOthersTags: () => {
@@ -116,17 +118,14 @@ const state = reactive({
         console.warn(err)
       })
     }
-    store.commit(
-      'tagsView/DEL_OTHERS_VISITED_VIEWS',
-      state.selectedTag as ITagView
-    )
+    tagsViewStore.delOthersVisitedViews(state.selectedTag as ITagView)
   },
   closeAllTags: (view: ITagView) => {
-    store.commit('tagsView/DEL_ALL_VISITED_VIEWS')
+    tagsViewStore.delAllVisitedViews()
     if (state.affixTags.some((tag) => tag.path === currentRoute.path)) {
       return
     }
-    toLastView(store.state.tagsView.visitedViews, view)
+    toLastView(tagsViewStore.visitedViews, view)
   },
   openMenu: (tag: ITagView, e: MouseEvent) => {
     const menuMinWidth = 105
@@ -149,9 +148,9 @@ const state = reactive({
 })
 
 const visitedViews = computed(() => {
-  return store.state.tagsView.visitedViews
+  return tagsViewStore.visitedViews
 })
-const routes = computed(() => store.state.permission.routes)
+const routes = computed(() => permissionStore.routes)
 
 const filterAffixTags = (routes: RouteRecordRaw[], basePath = '/') => {
   let tags: ITagView[] = []
@@ -182,17 +181,14 @@ const initTags = () => {
   for (const tag of state.affixTags) {
     // 必须含有 name 属性
     if (tag.name) {
-      store.commit(
-        'tagsView/ADD_VISITED_VIEW',
-        tag as ITagView
-      )
+      tagsViewStore.addVisitedView(tag as ITagView)
     }
   }
 }
 
 const addTags = () => {
   if (currentRoute.name) {
-    store.commit('tagsView/ADD_VISITED_VIEW', currentRoute)
+    tagsViewStore.addVisitedView(currentRoute)
   }
   return false
 }
@@ -206,10 +202,7 @@ const moveToCurrentTag = () => {
     if ((tag.to as ITagView).path === currentRoute.path) {
       // When query is different then update
       if ((tag.to as ITagView).fullPath !== currentRoute.fullPath) {
-        store.commit(
-          'tags-view/UPDATE_VISITED_VIEW',
-          currentRoute
-        )
+        tagsViewStore.updateVisitedView(currentRoute)
       }
     }
   }
@@ -269,9 +262,9 @@ onBeforeMount(() => {
         margin-right: 15px;
       }
       &.active {
-        background-color: #409EFF;
+        background-color: #409eff;
         color: #fff;
-        border-color: #409EFF;
+        border-color: #409eff;
         &::before {
           content: "";
           background: #fff;

src/layout/index.vue

@@ -21,17 +21,19 @@
 </template>
 
 <script lang="ts" setup>
-import { DeviceType } from '@/store/modules/app'
+import { useAppStore, DeviceType } from '@/store/modules/app'
+import { useSettingsStore } from '@/store/modules/settings'
 import { computed, onBeforeMount, onBeforeUnmount, onMounted, reactive } from 'vue'
-import { store } from '@/store'
 import { AppMain, NavigationBar, Settings, Sidebar, TagsView, RightPanel } from './components'
-import userResize from './userResize'
+import useResize from './useResize'
 
-const { sidebar, device, addEventListenerOnResize, resizeMounted, removeEventListenerResize, watchRouter } = userResize()
+const { sidebar, device, addEventListenerOnResize, resizeMounted, removeEventListenerResize, watchRouter } = useResize()
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
 
 const state = reactive({
   handleClickOutside: () => {
-    store.commit('app/CLOSE_SIDEBAR', false)
+    appStore.closeSidebar(false)
   }
 })
 
@@ -43,15 +45,14 @@ const classObj = computed(() => {
     mobile: device.value === DeviceType.Mobile
   }
 })
-
 const showSettings = computed(() => {
-  return store.state.settings.showSettings
+  return settingsStore.showSettings
 })
 const showTagsView = computed(() => {
-  return store.state.settings.showTagsView
+  return settingsStore.showTagsView
 })
 const fixedHeader = computed(() => {
-  return store.state.settings.fixedHeader
+  return settingsStore.fixedHeader
 })
 
 watchRouter()