wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
不做码农
2022-06-11 10:33:49 +08:00
parent ef604d008d
commit 859f8acfe2
41 changed files with 700 additions and 797 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/components/AppMain.vue
+5 -3
View File
@@ -10,9 +10,11 @@
</el-main>
</template>
<script setup>
const route = useRoute()
const store = useStore()
import useTagsViewStore from '@/store/modules/tagsView'
// const route = useRoute()
const tagsViewStore = useTagsViewStore()
// tagsViewStore.addCachedView(route)
const cachedViews = computed(() => {
return store.state.tagsView.cachedViews
return tagsViewStore.cachedViews
})
</script>
src/layout/components/Navbar.vue
+18 -13
View File
@@ -1,13 +1,13 @@
<template>
<div class="navbar" :data-theme="sideTheme" :class="getters.device">
<hamburger id="hamburger-container" :is-active="getters.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<template v-if="getters.device != 'mobile'">
<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" />
<div class="navbar" :data-theme="sideTheme" :class="appStore.device">
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<template v-if="appStore.device != 'mobile'">
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />
<top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" />
</template>
<div class="right-menu">
<header-search id="header-search" class="right-menu-item" v-if="getters.device != 'mobile'" />
<header-search id="header-search" class="right-menu-item" v-if="appStore.device != 'mobile'" />
<zr-git title="源码地址" class="right-menu-item" />
<zr-doc title="文档地址" class="right-menu-item" />
<screenfull title="全屏" class="right-menu-item" />
@@ -17,8 +17,8 @@
<el-dropdown @command="handleCommand" class="right-menu-item avatar-container" trigger="hover">
<span class="avatar-wrapper">
<img :src="getters.avatar" class="user-avatar" />
<span class="name">{{ getters.name }}</span>
<img :src="userStore.avatar" class="user-avatar" />
<span class="name">{{ userStore.name }}</span>
<el-icon><ArrowDown /></el-icon>
</span>
<template #dropdown>
@@ -50,13 +50,18 @@ import ZrGit from '@/components/Zr/Git'
import ZrDoc from '@/components/Zr/Doc'
import Notice from '@/components/Notice/Index'
import LangSelect from '@/components/LangSelect/index'
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'
const { proxy } = getCurrentInstance()
const store = useStore()
const getters = computed(() => store.getters)
const sideTheme = computed(() => store.state.settings.sideTheme)
const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()
const sideTheme = computed(() => settingsStore.sideTheme)
function toggleSideBar() {
store.dispatch('app/toggleSideBar')
appStore.toggleSideBar()
}
function handleCommand(command) {
@@ -80,7 +85,7 @@ function logout() {
type: 'warning',
})
.then(() => {
store.dispatch('LogOut').then(() => {
userStore.logOut().then(() => {
location.href = '/index'
})
})
src/layout/components/Settings/index.vue
+19 -38
View File
@@ -93,13 +93,18 @@ import 'element-plus/theme-chalk/dark/css-vars.css'
import { useDark, useCycleList, useColorMode } from '@vueuse/core'
import { useDynamicTitle } from '@/utils/dynamicTitle'
import { getLightColor } from '@/utils/index'
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'])
// 可以手动更改当前值 model.value = 'cafe'
@@ -117,13 +122,10 @@ const isDark = useDark()
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)
}
},
})
@@ -131,50 +133,35 @@ const topNav = computed({
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 })
},
})
// 是否显示底部
const showFooter = computed({
get: () => storeSettings.value.showFooter,
set: (val) => {
store.dispatch('settings/changeSetting', {
key: 'showFooter',
value: val,
})
settingsStore.changeSetting({ key: 'showFooter', 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()
},
@@ -216,10 +203,7 @@ watch(
* 改变主题颜色
*/
function themeChange(val) {
store.dispatch('settings/changeSetting', {
key: 'theme',
value: val,
})
settingsStore.changeSetting({ key: 'theme', value: val })
theme.value = val
// 设置element-plus ui主题
document.documentElement.style.setProperty('--el-color-primary', val)
@@ -230,10 +214,7 @@ function themeChange(val) {
}
}
function handleTheme(val) {
store.dispatch('settings/changeSetting', {
key: 'sideTheme',
value: val,
})
settingsStore.changeSetting({ key: 'sideTheme', value: val })
sideTheme.value = val
const body = document.documentElement
if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black')
src/layout/components/Sidebar/Logo.vue
+3 -2
View File
@@ -15,6 +15,7 @@
<script setup>
import logo from '@/assets/logo/logo.png'
import useSettingsStore from '@/store/modules/settings'
defineProps({
collapse: {
@@ -24,8 +25,8 @@ defineProps({
})
const title = ref(import.meta.env.VITE_APP_TITLE)
const store = useStore()
const sideTheme = computed(() => store.state.settings.sideTheme)
const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);
</script>
<style lang="scss" scoped>
src/layout/components/Sidebar/index.vue
+11 -6
View File
@@ -20,15 +20,20 @@
<script setup>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const route = useRoute()
const store = useStore()
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const sidebarRouters = computed(() => store.getters.sidebarRouters)
const showLogo = computed(() => store.state.settings.sidebarLogo)
const sideTheme = computed(() => store.state.settings.sideTheme)
const theme = computed(() => store.state.settings.theme)
const isCollapse = computed(() => !store.state.app.sidebar.opened)
const sidebarRouters = computed(() => permissionStore.sidebarRouters)
const showLogo = computed(() => settingsStore.sidebarLogo)
const sideTheme = computed(() => settingsStore.sideTheme)
const theme = computed(() => settingsStore.theme)
const isCollapse = computed(() => !appStore.sidebar.opened)
const activeMenu = computed(() => {
const { meta, path } = route
src/layout/components/TagsView/ScrollPane.vue
+16 -19
View File
@@ -1,19 +1,16 @@
<template>
<el-scrollbar
ref="scrollContainer"
:vertical="false"
class="scroll-container"
@wheel.prevent="handleScroll"
>
<el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.prevent="handleScroll">
<slot />
</el-scrollbar>
</template>
<script setup>
const tagAndTagSpacing = ref(4);
const { proxy } = getCurrentInstance();
import useTagsViewStore from '@/store/modules/tagsView'
const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrap$);
const tagAndTagSpacing = ref(4)
const { proxy } = getCurrentInstance()
const scrollWrapper = computed(() => proxy.$refs.scrollContainer.$refs.wrap$)
onMounted(() => {
scrollWrapper.value.addEventListener('scroll', emitScroll, true)
@@ -24,7 +21,7 @@ onBeforeUnmount(() => {
function handleScroll(e) {
const eventDelta = e.wheelDelta || -e.deltaY * 40
const $scrollWrapper = scrollWrapper.value;
const $scrollWrapper = scrollWrapper.value
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
}
const emits = defineEmits()
@@ -32,13 +29,13 @@ const emitScroll = () => {
emits('scroll')
}
const store = useStore();
const visitedViews = computed(() => store.state.tagsView.visitedViews);
const tagsViewStore = useTagsViewStore()
const visitedViews = computed(() => tagsViewStore.visitedViews)
function moveToTarget(currentTag) {
const $container = proxy.$refs.scrollContainer.$el
const $containerWidth = $container.offsetWidth
const $scrollWrapper = scrollWrapper.value;
const $scrollWrapper = scrollWrapper.value
let firstTag = null
let lastTag = null
@@ -54,17 +51,17 @@ function moveToTarget(currentTag) {
} else if (lastTag === currentTag) {
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
} else {
const tagListDom = document.getElementsByClassName('tags-view-item');
const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
const tagListDom = document.getElementsByClassName('tags-view-item')
const currentIndex = visitedViews.value.findIndex((item) => item === currentTag)
let prevTag = null
let nextTag = null
for (const k in tagListDom) {
if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
prevTag = tagListDom[k];
prevTag = tagListDom[k]
}
if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
nextTag = tagListDom[k];
nextTag = tagListDom[k]
}
}
}
@@ -87,7 +84,7 @@ defineExpose({
})
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.scroll-container {
white-space: nowrap;
position: relative;
@@ -100,4 +97,4 @@ defineExpose({
height: 49px;
}
}
</style>
</style>
src/layout/components/TagsView/index.vue
+9 -7
View File
@@ -37,6 +37,9 @@
<script setup>
import ScrollPane from './ScrollPane'
import { getNormalPath } from '@/utils/ruoyi'
import useTagsViewStore from '@/store/modules/tagsView'
// import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'
const visible = ref(false)
const top = ref(0)
@@ -46,13 +49,12 @@ const affixTags = ref([])
const scrollPaneRef = ref(null)
const { proxy } = getCurrentInstance()
const store = useStore()
const route = useRoute()
const router = useRouter()
const visitedViews = computed(() => store.state.tagsView.visitedViews)
const routes = computed(() => store.state.permission.routes)
// const theme = computed(() => store.state.settings.theme)
const visitedViews = computed(() => useTagsViewStore().visitedViews)
const routes = computed(() => usePermissionStore().routes)
// const theme = computed(() => useSettingsStore().theme);
watch(route, () => {
addTags()
@@ -124,14 +126,14 @@ function initTags() {
for (const tag of res) {
// Must have tag name
if (tag.name) {
store.dispatch('tagsView/addVisitedView', tag)
useTagsViewStore().addVisitedView(tag)
}
}
}
function addTags() {
const { name } = route
if (name) {
store.dispatch('tagsView/addView', route)
useTagsViewStore().addView(route)
}
return false
}
@@ -142,7 +144,7 @@ function moveToCurrentTag() {
scrollPaneRef.value.moveToTarget(r)
// when query is different then update
if (r.fullPath !== route.fullPath) {
store.dispatch('tagsView/updateVisitedView', route)
useTagsViewStore().updateVisitedView(route)
}
}
}
src/layout/index.vue
+20 -16
View File
@@ -33,25 +33,29 @@ import { useWindowSize } from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue'
import { Navbar, Settings, TagsView } from './components'
import defaultSettings from '@/settings'
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import useTagsViewStore from '@/store/modules/tagsView'
const menuDrawer = computed({
get: () => store.state.app.sidebar.opened,
get: () => useAppStore().sidebar.opened,
set: (val) => {
store.dispatch('app/toggleSideBar')
useAppStore().toggleSideBar(val)
},
})
let store = useStore()
const theme = computed(() => store.state.settings.theme)
const sidebar = computed(() => store.state.app.sidebar)
const device = computed(() => store.state.app.device)
const needTagsView = computed(() => store.state.settings.tagsView)
const fixedHeader = computed(() => store.state.settings.fixedHeader)
const showFooter = computed(() => store.state.settings.showFooter)
const settingsStore = useSettingsStore()
const theme = computed(() => settingsStore.theme)
const sidebar = computed(() => useAppStore().sidebar)
const device = computed(() => useAppStore().device)
const needTagsView = computed(() => settingsStore.tagsView)
const fixedHeader = computed(() => settingsStore.fixedHeader)
const showFooter = computed(() => settingsStore.showFooter)
// appMain 模块 start
const route = useRoute()
store.dispatch('tagsView/addCachedView', route)
useTagsViewStore().addCachedView(route)
const cachedViews = computed(() => {
return store.state.tagsView.cachedViews
return useTagsViewStore().cachedViews
})
//appMain 模块结束
@@ -66,18 +70,18 @@ const WIDTH = 992 // refer to Bootstrap's responsive design
watchEffect(() => {
if (device.value === 'mobile' && sidebar.value.opened) {
// store.dispatch('app/closeSideBar')
// useAppStore().closeSideBar()
}
if (width.value - 1 < WIDTH) {
store.dispatch('app/toggleDevice', 'mobile')
// store.dispatch('app/closeSideBar')
useAppStore().toggleDevice('mobile')
// useAppStore().closeSideBar()
} else {
store.dispatch('app/toggleDevice', 'desktop')
useAppStore().toggleDevice('desktop')
}
})
function handleClickOutside() {
store.dispatch('app/closeSideBar')
useAppStore().closeSideBar()
}
const settingRef = ref(null)