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

feat: 修改vuex为pinia

Browse Source 
修改vuex为pinia
This commit is contained in:
zc
2021-12-25 13:26:12 +08:00
parent d53c13ecba
commit 41cba750b5
17 changed files with 179 additions and 239 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)
}
}
}