vite+vue+ts+element-plus从零开发管理后台框架(11)-菜单展开折叠状态持久化

现在当我们把菜单折叠然后再刷新浏览器,菜单又回到默认的展开状态了。我们要把展开折叠状态持久化,让它在下次进入时为关闭前的状态。为了实现这个目标,我们要引入pinia这个依赖以及它的持久化插件pinia-plugin-persistedstate

依赖和插件

安装

npm install pinia@2.1.7 pinia-plugin-persistedstate@3.2.1

编辑src/main.ts,使用依赖和插件。

import { createApp } from 'vue'

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const app = createApp(App)

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(pinia).use(ElementPlus).use(router)
app.mount('#app')

菜单 Store

新建src/store/menu.ts,内容如下。

import { defineStore } from 'pinia'


const useMenuStore = defineStore('appmenu', {
    state: () => {
        return {
            collapse: false,
        }
    },

    getters: {
        width(): string {
            return this.collapse ? '64px' : '200px'
        }
    },
})


export default useMenuStore

这里定义了collapse是否折叠的属性,以及一个获取菜单宽度的getter

使用 Store

编辑src/views/Main.vue,引入并实例化菜单Store

import * as MenuUtil from '@/util/menu'
import useMenuStore from '@/store/menu'


const route = useRoute()

const menuStore = useMenuStore()

header-left使用实例width这个getter

<div class="header-left" :style="{ width: menuStore.width }">left</div>

header-center使用实例属性collapse

<div class="header-center">
    <el-icon size="22" style="margin-left: 15px;" @click="onCollapseSwitch">
        <expand v-if="menuStore.collapse" />
        <fold v-else />
    </el-icon>
</div>

el-aside使用实例width这个getter

<el-aside :width="menuStore.width">

el-menu使用实例属性collapse

<el-menu router :default-active="route.path" :collapse="menuStore.collapse">

修改onCollapseSwitch方法

const onCollapseSwitch = () => {
    menuStore.collapse = !menuStore.collapse
}

此时测试发现跟之前是一样的效果了,但刷新浏览器还是未持久化状态。

持久化数据

编辑src/store/menu.ts,添加persist属性并设置为true

state: () => {
    return {
        collapse: false,
    }
},

persist: true,

测试

此时把菜单设置为折叠状态,再刷新浏览器,发现菜单还是折叠状态,说明状态持久化成功了,查看Local storage也发现确实是保存了数据。

持久化数据

删除无用代码

编辑src/views/Main.vue,删除collapse这个响应式变量。

const collapse = ref(false)
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!