tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch '添加pinia'

Browse Source 
# Conflicts:
#	src/api/system/role.ts
This commit is contained in:
zc
2021-12-25 13:34:44 +08:00
parent 5d6aa9a09d 41cba750b5
commit bc8e97627c
19 changed files with 288 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/layout/components/AppMain.vue
View File

@@ -13,15 +13,13 @@
<script lang="ts">
import {defineComponent} from "vue";
import {useStore} from '@/store'
import {useRoute} from "vue-router";
import {tagsViewStoreHook} from '@/store/modules/tagsView'
export default defineComponent({
setup() {
const store = useStore()
const route = useRoute()
const cachedViews = () => {
return store.state.tagsView.cachedViews
return tagsViewStoreHook().cachedViews
}
const key = () => {
return route.path
@@ -68,4 +66,4 @@ export default defineComponent({
padding-right: 15px;
}
}
</style>
</style>

16
src/layout/components/Navbar.vue
View File

@@ -48,12 +48,13 @@
</template>
<script>
import {reactive, computed, toRefs} from "vue";
import {useStore} from "@/store";
import {useRoute, useRouter} from "vue-router"
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import Hamburger from '@/components/Hamburger/index.vue'
import Screenfull from '@/components/screenfull/index.vue'
import {tagsViewStoreHook} from '@/store/modules/tagsView'
import {useAppStoreHook} from '@/store/modules/app'
import {useUserStoreHook} from '@/store/modules/user'
export default {
components: {
Breadcrumb,
@@ -61,26 +62,25 @@ export default {
Screenfull
},
setup() {
const store = useStore()
const route = useRoute()
const router = useRouter()
const sidebar = computed(() => {
return store.state.app.sidebar
return useAppStoreHook().sidebar
})
const device = computed(() => {
return store.state.app.device
return useAppStoreHook().device
})
const avatar = computed(() => {
return store.state.user.avatar
return useUserStoreHook().avatar
})
const state = reactive({
toggleSideBar: () => {
store.dispatch('app/toggleSideBar', false)
useAppStoreHook().toggleSidebar(false)
},
logout: () => {
store.dispatch('user/logout').then(()=>{
useUserStoreHook().logout().then(()=>{
router.push(`/login?redirect=${route.fullPath}`)
})
}

20
src/layout/components/Settings/index.vue
View File

@@ -29,30 +29,30 @@
<script>
import ThemePicker from '@/components/ThemePicker/index.vue'
import {defineComponent, reactive, toRefs, watch} from "vue"
import {useStore} from '@/store'
// import {useStore} from '@/store'
import { useSettingStoreHook } from "@/store/modules/settings";
export default defineComponent({
components: {ThemePicker},
setup() {
const store = useStore()
// const store = useStore()
const state = reactive({
fixedHeader:store.state.settings.fixedHeader,
tagsView:store.state.settings.tagsView,
sidebarLogo:store.state.settings.sidebarLogo,
fixedHeader:useSettingStoreHook().fixedHeader,
tagsView:useSettingStoreHook().tagsView,
sidebarLogo:useSettingStoreHook().sidebarLogo,
themeChange: (val) => {
store.dispatch('settings/changeSetting', { key: 'theme', val })
useSettingStoreHook().changeSetting( { key: 'theme', val })
}
})
watch(()=>state.fixedHeader,(value)=>{
store.dispatch('settings/changeSetting',{ key: 'fixedHeader', value })
useSettingStoreHook().changeSetting( { key: 'fixedHeader', value })
})
watch(() => state.tagsView, (value) => {
store.dispatch('settings/changeSetting', { key: 'showTagsView', value })
useSettingStoreHook().changeSetting( { key: 'showTagsView', value })
})
watch(() => state.sidebarLogo, (value) => {
store.dispatch('settings/changeSetting', { key: 'sidebarLogo', value })
useSettingStoreHook().changeSetting( { key: 'sidebarLogo', value })
})
return {

13
src/layout/components/Sidebar/index.vue
View File

@@ -34,7 +34,9 @@ import {computed, defineComponent} from "vue";
import SidebarItem from './SidebarItem.vue'
import Logo from './Logo.vue'
import variables from '@/styles/variables.scss'
import {useStore} from '@/store'
import { useSettingStoreHook } from "@/store/modules/settings";
import { useAppStoreHook } from "@/store/modules/app";
import { usePermissionStoreHook } from "@/store/modules/permission";
import {useRoute} from 'vue-router'
export default defineComponent({
@@ -43,11 +45,10 @@ export default defineComponent({
Logo
},
setup() {
const store = useStore();
const route = useRoute()
const sidebar = computed(() => store.state.app.sidebar)
const routes = computed(() => store.state.permission.routes)
const showLogo = computed(() => store.state.settings.sidebarLogo)
const sidebar = computed(() => useAppStoreHook().sidebar)
const routes = computed(() => usePermissionStoreHook().routes)
const showLogo = computed(() => useSettingStoreHook().sidebarLogo)
const activeMenu = computed(() => {
const {meta, path} = route
// if set path, the sidebar will highlight the path you set
@@ -56,7 +57,7 @@ export default defineComponent({
}
return path
})
const isCollapse = computed(() => !store.state.app.sidebar.opened)
const isCollapse = computed(() => !useAppStoreHook().sidebar.opened)
return {
sidebar,

28
src/layout/components/TagsView/index.vue
View File

@@ -32,10 +32,10 @@
<script lang="ts">
import {Close} from '@element-plus/icons'
import {tagsViewStoreHook} from '@/store/modules/tagsView'
import {usePermissionStoreHook} from '@/store/modules/Permission'
import ScrollPane from './ScrollPane.vue'
import path from 'path-browserify'
import {useStore} from "@store";
import {
defineComponent,
computed,
@@ -53,7 +53,6 @@ import {TagView} from "@store/interface";
export default defineComponent({
components: {ScrollPane,Close},
setup() {
const store = useStore()
const router = useRouter()
const instance = getCurrentInstance()
const currentRoute = useRoute()
@@ -86,7 +85,7 @@ export default defineComponent({
return tag.meta && tag.meta.affix
},
refreshSelectedTag: (view: TagView) => {
store.dispatch('tagsView/delCachedView', view)
tagsViewStoreHook().delCachedView(view)
const { fullPath } = view
nextTick(() => {
router.replace({ path: '/redirect' + fullPath }).catch(err => {
@@ -95,23 +94,24 @@ export default defineComponent({
})
},
closeSelectedTag: (view: TagView) => {
store.dispatch('tagsView/delView', view)
tagsViewStoreHook().delView(view);
if (state.isActive(view)) {
toLastView(store.state.tagsView.visitedViews, view)
toLastView(tagsViewStoreHook().visitedViews, view)
}
},
closeOthersTags: () => {
if (state.selectedTag.fullPath !== currentRoute.path && state.selectedTag.fullPath !== undefined) {
router.push(state.selectedTag.fullPath)
}
store.dispatch('tagsView/delOthersViews', state.selectedTag as TagView)
tagsViewStoreHook().delOthersViews(state.selectedTag as TagView)
},
closeAllTags: (view: TagView) => {
store.dispatch('tagsView/delAllViews', undefined)
tagsViewStoreHook().delAllViews(undefined);
if (state.affixTags.some(tag => tag.path === currentRoute.path)) {
return
}
toLastView(store.state.tagsView.visitedViews, view)
toLastView(tagsViewStoreHook().visitedViews, view)
},
openMenu: (tag: TagView, e: MouseEvent) => {
const menuMinWidth = 105
@@ -138,9 +138,9 @@ export default defineComponent({
})
const visitedViews = computed(() => {
return store.state.tagsView.visitedViews
return tagsViewStoreHook().visitedViews
})
const routes = computed(() => store.state.permission.routes)
const routes = computed(() =>usePermissionStoreHook().routes)
const filterAffixTags = (routes: RouteRecordRaw[], basePath = '/') => {
let tags: TagView[] = []
@@ -171,14 +171,14 @@ export default defineComponent({
for (const tag of state.affixTags) {
// Must have tag name
if (tag.name) {
store.dispatch('tagsView/addVisitedView', tag as TagView)
tagsViewStoreHook().addVisitedView(tag as TagView)
}
}
}
const addTags = () => {
if (currentRoute.name) {
store.dispatch('tagsView/addView', currentRoute)
tagsViewStoreHook().addView(currentRoute)
}
return false
}
@@ -192,7 +192,7 @@ export default defineComponent({
(scrollPaneRef.value as any).moveToCurrentTag(tag)
// When query is different then update
if ((tag.to as TagView).fullPath !== currentRoute.fullPath) {
store.dispatch('tagsView/updateVisitedView', currentRoute)
tagsViewStoreHook().updateVisitedView(currentRoute)
}
}
}

38
src/layout/index.vue
View File

@@ -21,9 +21,9 @@
<script>
import {computed, defineComponent, onBeforeMount, onBeforeUnmount, onMounted, reactive, toRefs, watch} from "vue";
import {AppMain, Navbar, Settings, Sidebar, TagsView} from './components/index.ts'
import {useStore} from "@store";
import {useRoute} from "vue-router";
import {useRoute} from "vue-router";
import { useAppStoreHook } from "@/store/modules/app";
import { useSettingStoreHook } from "@/store/modules/settings";
const {body} = document
const WIDTH = 992
@@ -37,9 +37,7 @@ export default defineComponent({
TagsView
},
setup() {
const store = useStore()
const sidebar = computed(() => store.state.app.sidebar)
const sidebar = computed(() => useAppStoreHook().sidebar)
const isMobile = () => {
const rect = body.getBoundingClientRect()
return rect.width - 1 < WIDTH
@@ -47,17 +45,17 @@ export default defineComponent({
const resizeHandler = () => {
if (!document.hidden) {
store.dispatch('app/toggleDevice', isMobile() ? 'mobile' : 'desktop')
useAppStoreHook().toggleSidebar( isMobile() ? 'mobile' : 'desktop')
if (isMobile()) {
store.dispatch('app/closeSideBar', {withoutAnimation: true})
useAppStoreHook().closeSideBar({withoutAnimation: true});
}
}
}
const resizeMounted = () => {
if (isMobile()) {
store.dispatch('app/toggleDevice', 'mobile')
store.dispatch('app/closeSideBar', {withoutAnimation: true})
useAppStoreHook().toggleDevice( 'mobile' )
useAppStoreHook().toggleSidebar({withoutAnimation: true});
}
}
const addEventListenerOnResize = () => {
@@ -70,35 +68,35 @@ export default defineComponent({
const currentRoute = useRoute()
const watchRouter = watch(() => currentRoute.name, () => {
if (store.state.app.device === 'mobile' && store.state.app.sidebar.opened) {
store.dispatch('app/closeSideBar', false)
if (useAppStoreHook().device === 'mobile' && useAppStoreHook().sidebar.opened) {
useAppStoreHook().closeSideBar(false)
}
})
const state = reactive({
handleClickOutside: () => {
store.dispatch('app/closeSideBar', false)
useAppStoreHook().closeSideBar(false)
}
})
const classObj = computed(() => {
return {
hideSidebar: !store.state.app.sidebar.opened,
openSidebar: store.state.app.sidebar.opened,
withoutAnimation: store.state.app.sidebar.withoutAnimation,
mobile: store.state.app.device === 'mobile'
hideSidebar: !useAppStoreHook().sidebar.opened,
openSidebar: useAppStoreHook().sidebar.opened,
withoutAnimation: useAppStoreHook().sidebar.withoutAnimation,
mobile: useAppStoreHook().device === 'mobile'
}
})
const showSettings = computed(() => {
return store.state.settings.showSettings
return useSettingStoreHook().showSettings
})
const needTagsView = computed(() => {
return store.state.settings.tagsView
return useSettingStoreHook().tagsView
})
const fixedHeader = computed(() => {
return store.state.settings.fixedHeader
return useSettingStoreHook().fixedHeader
})
watchRouter()