使用Pinia代替Vuex进行数据存储

package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "vite",
-	"build:prod": "vite build",
+    "build:prod": "vite build",
     "build:stage": "vite build --mode staging",
     "preview": "vite preview"
   },
@@ -25,10 +25,10 @@
     "js-cookie": "3.0.1",
     "jsencrypt": "3.2.1",
     "nprogress": "0.2.0",
+    "pinia": "2.0.14",
     "vue": "3.2.31",
     "vue-cropper": "1.0.3",
-    "vue-router": "4.0.14",
-    "vuex": "4.0.2"
+    "vue-router": "4.0.14"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "2.3.3",

src/components/HeaderSearch/index.vue

@@ -21,16 +21,16 @@
 import Fuse from 'fuse.js'
 import { getNormalPath } from '@/utils/ruoyi'
 import { isHttp } from '@/utils/validate'
+import usePermissionStore from '@/store/modules/permission'
 
 const search = ref('');
 const options = ref([]);
 const searchPool = ref([]);
 const show = ref(false);
 const fuse = ref(undefined);
 const headerSearchSelectRef = ref(null);
-const store = useStore();
 const router = useRouter();
-const routes = computed(() => store.getters.permission_routes);
+const routes = computed(() => usePermissionStore().routes);
 
 function click() {
   show.value = !show.value

src/components/SizeSelect/index.vue

@@ -16,36 +16,24 @@
 </template>
 
 <script setup>
-import { ElMessage } from 'element-plus'
+import useAppStore from "@/store/modules/app";
 
-const store = useStore();
-const size = computed(() => store.getters.size);
+const appStore = useAppStore();
+const size = computed(() => appStore.size);
 const route = useRoute();
 const router = useRouter();
-const {proxy} = getCurrentInstance();
+const { proxy } = getCurrentInstance();
 const sizeOptions = ref([
-  { label: '较大', value: 'large' },
-  { label: '默认', value: 'default' },
-  { label: '稍小', value: 'small' },
-])
+  { label: "较大", value: "large" },
+  { label: "默认", value: "default" },
+  { label: "稍小", value: "small" },
+]);
 
-function refreshView() {
-  // In order to make the cached page re-rendered
-  store.dispatch('tagsView/delAllCachedViews', route)
-
-  const { fullPath } = route
-
-  nextTick(() => {
-    router.replace({
-      path: '/redirect' + fullPath
-    })
-  })
-}
 function handleSetSize(size) {
   proxy.$modal.loading("正在设置布局大小，请稍候...");
-  store.dispatch('app/setSize', size)
-  setTimeout("window.location.reload()", 1000)
-};
+  appStore.setSize(size);
+  setTimeout("window.location.reload()", 1000);
+}
 </script>
 
 <style lang='scss' scoped>

src/components/TopNav/index.vue

@@ -30,6 +30,9 @@
 <script setup>
 import { constantRoutes } from "@/router"
 import { isHttp } from '@/utils/validate'
+import useAppStore from '@/store/modules/app'
+import useSettingsStore from '@/store/modules/settings'
+import usePermissionStore from '@/store/modules/permission'
 
 // 顶部栏初始数
 const visibleNumber = ref(null);
@@ -38,14 +41,16 @@ const currentIndex = ref(null);
 // 隐藏侧边栏路由
 const hideList = ['/index', '/user/profile'];
 
-const store = useStore();
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const permissionStore = usePermissionStore()
 const route = useRoute();
 const router = useRouter();
 
 // 主题颜色
-const theme = computed(() => store.state.settings.theme);
+const theme = computed(() => settingsStore.theme);
 // 所有的路由信息
-const routers = computed(() => store.state.permission.topbarRouters);
+const routers = computed(() => permissionStore.topbarRouters);
 
 // 顶部显示菜单
 const topMenus = computed(() => {
@@ -91,10 +96,10 @@ const activeMenu = computed(() => {
   if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
     const tmpPath = path.substring(1, path.length);
     activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
-    store.dispatch('app/toggleSideBarHide', false);
+    appStore.toggleSideBarHide(false);
   } else if(!route.children) {
     activePath = path;
-    store.dispatch('app/toggleSideBarHide', true);
+    appStore.toggleSideBarHide(true);
   }
   activeRoutes(activePath);
   return activePath;
@@ -114,11 +119,11 @@ function handleSelect(key, keyPath) {
   } else if (!route || !route.children) {
     // 没有子路由路径内部打开
     router.push({ path: key });
-    store.dispatch('app/toggleSideBarHide', true);
+    appStore.toggleSideBarHide(true);
   } else {
     // 显示左侧联动菜单
     activeRoutes(key);
-    store.dispatch('app/toggleSideBarHide', false);
+    appStore.toggleSideBarHide(false);
   }
 }
 
@@ -132,7 +137,7 @@ function activeRoutes(key) {
     });
   }
   if(routes.length > 0) {
-    store.commit("SET_SIDEBAR_ROUTERS", routes);
+    permissionStore.setSidebarRouters(routes);
   }
   return routes;
 }

src/directive/permission/hasPermi.js

@@ -3,13 +3,13 @@
  * Copyright (c) 2019 ruoyi
  */
 
-import store from '@/store'
+import useUserStore from '@/store/modules/user'
 
 export default {
   mounted(el, binding, vnode) {
     const { value } = binding
     const all_permission = "*:*:*";
-    const permissions = store.getters && store.getters.permissions
+    const permissions = useUserStore().permissions
 
     if (value && value instanceof Array && value.length > 0) {
       const permissionFlag = value

src/directive/permission/hasRole.js

@@ -3,13 +3,13 @@
  * Copyright (c) 2019 ruoyi
  */
 
-import store from '@/store'
+import useUserStore from '@/store/modules/user'
 
 export default {
   mounted(el, binding, vnode) {
     const { value } = binding
     const super_admin = "admin";
-    const roles = store.getters && store.getters.roles
+    const roles = useUserStore().roles
 
     if (value && value instanceof Array && value.length > 0) {
       const roleFlag = value

src/layout/components/AppMain.vue

@@ -11,11 +11,13 @@
 </template>
 
 <script setup>
-let store = useStore()
+import useTagsViewStore from '@/store/modules/tagsview'
+
+const tagsViewStore = useTagsViewStore()
 const route = useRoute()
-store.dispatch('tagsView/addCachedView', route)
+tagsViewStore.addCachedView(route)
 const cachedViews = computed(() => {
-    return store.state.tagsView.cachedViews
+    return tagsViewStore.cachedViews
 })
 </script>
 

src/layout/components/Navbar.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!$store.state.settings.topNav" />
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="$store.state.settings.topNav" />
+    <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
 
     <div class="right-menu">
-      <template v-if="getters.device !== 'mobile'">
+      <template v-if="appStore.device !== 'mobile'">
         <header-search id="header-search" class="right-menu-item" />
 
         <el-tooltip content="源码地址" effect="dark" placement="bottom">
@@ -25,7 +25,7 @@
       <div class="avatar-container">
         <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
           <div class="avatar-wrapper">
-            <img :src="getters.avatar" class="user-avatar" />
+            <img :src="userStore.avatar" class="user-avatar" />
             <el-icon><caret-bottom /></el-icon>
           </div>
           <template #dropdown>
@@ -57,12 +57,16 @@ import SizeSelect from '@/components/SizeSelect'
 import HeaderSearch from '@/components/HeaderSearch'
 import RuoYiGit from '@/components/RuoYi/Git'
 import RuoYiDoc from '@/components/RuoYi/Doc'
+import useAppStore from '@/store/modules/app'
+import useUserStore from '@/store/modules/user'
+import useSettingsStore from '@/store/modules/settings'
 
-const store = useStore();
-const getters = computed(() => store.getters);
+const appStore = useAppStore()
+const userStore = useUserStore()
+const settingsStore = useSettingsStore()
 
 function toggleSideBar() {
-  store.dispatch('app/toggleSideBar')
+  appStore.toggleSideBar()
 }
 
 function handleCommand(command) {
@@ -84,7 +88,7 @@ function logout() {
     cancelButtonText: '取消',
     type: 'warning'
   }).then(() => {
-    store.dispatch('LogOut').then(() => {
+    userStore.logOut().then(() => {
       location.href = '/index';
     })
   }).catch(() => { });

src/layout/components/Settings/index.vue

@@ -84,84 +84,68 @@ import originElementPlus from 'element-plus/theme-chalk/index.css'
 import axios from 'axios'
 import { ElLoading, ElMessage } from 'element-plus'
 import { useDynamicTitle } from '@/utils/dynamicTitle'
+import useAppStore from '@/store/modules/app'
+import useSettingsStore from '@/store/modules/settings'
+import usePermissionStore from '@/store/modules/permission'
 
 const { proxy } = getCurrentInstance();
-const store = useStore();
+const appStore = useAppStore()
+const settingsStore = useSettingsStore()
+const permissionStore = usePermissionStore()
 const showSettings = ref(false);
-const theme = ref(store.state.settings.theme);
-const sideTheme = ref(store.state.settings.sideTheme);
-const storeSettings = computed(() => store.state.settings);
+const theme = ref(settingsStore.theme);
+const sideTheme = ref(settingsStore.sideTheme);
+const storeSettings = computed(() => settingsStore);
 const predefineColors = ref(["#409EFF", "#ff4500", "#ff8c00", "#ffd700", "#90ee90", "#00ced1", "#1e90ff", "#c71585"]);
 
 /** 是否需要topnav */
 const topNav = computed({
   get: () => storeSettings.value.topNav,
   set: (val) => {
-    store.dispatch('settings/changeSetting', {
-      key: 'topNav',
-      value: val
-    })
+    settingsStore.changeSetting({ key: 'topNav', value: val })
     if (!val) {
-      store.dispatch('app/toggleSideBarHide', false);
-      store.commit("SET_SIDEBAR_ROUTERS", store.state.permission.defaultRoutes);
+      appStore.toggleSideBarHide(false);
+      permissionStore.setSidebarRouters(permissionStore.defaultRoutes);
     }
   }
 })
 /** 是否需要tagview */
 const tagsView = computed({
   get: () => storeSettings.value.tagsView,
   set: (val) => {
-    store.dispatch('settings/changeSetting', {
-      key: 'tagsView',
-      value: val
-    })
+    settingsStore.changeSetting({ key: 'tagsView', value: val })
   }
 })
 /**是否需要固定头部 */
 const fixedHeader = computed({
   get: () => storeSettings.value.fixedHeader,
   set: (val) => {
-    store.dispatch('settings/changeSetting', {
-      key: 'fixedHeader',
-      value: val
-    })
+    settingsStore.changeSetting({ key: 'fixedHeader', value: val })
   }
 })
 /**是否需要侧边栏的logo */
 const sidebarLogo = computed({
   get: () => storeSettings.value.sidebarLogo,
   set: (val) => {
-    store.dispatch('settings/changeSetting', {
-      key: 'sidebarLogo',
-      value: val
-    })
+    settingsStore.changeSetting({ key: 'sidebarLogo', value: val })
   }
 })
 /**是否需要侧边栏的动态网页的title */
 const dynamicTitle = computed({
   get: () => storeSettings.value.dynamicTitle,
   set: (val) => {
-    store.dispatch('settings/changeSetting', {
-      key: 'dynamicTitle',
-      value: val
-    })
+    settingsStore.changeSetting({ key: 'dynamicTitle', value: val })
     // 动态设置网页标题
     useDynamicTitle()
   }
 })
 
 function themeChange(val) {
-  store.dispatch('settings/changeSetting', {
-    key: 'theme',
-    value: val
-  })
+  settingsStore.changeSetting({ key: 'theme', value: val })
   theme.value = val;
 }
 function handleTheme(val) {
-  store.dispatch('settings/changeSetting', {
-    key: 'sideTheme',
-    value: val
-  })
+  settingsStore.changeSetting({ key: 'sideTheme', value: val })
   sideTheme.value = val;
 }
 function saveSetting() {

src/layout/components/Sidebar/Logo.vue

@@ -16,6 +16,7 @@
 <script setup>
 import variables from '@/assets/styles/variables.module.scss'
 import logo from '@/assets/logo/logo.png'
+import useSettingsStore from '@/store/modules/settings'
 
 defineProps({
   collapse: {
@@ -25,8 +26,8 @@ defineProps({
 })
 
 const title = ref('若依管理系统');
-const store = useStore();
-const sideTheme = computed(() => store.state.settings.sideTheme);
+const settingsStore = useSettingsStore();
+const sideTheme = computed(() => settingsStore.sideTheme);
 </script>
 
 <style lang="scss" scoped>