vite+vue+ts+element-plus从零开发管理后台框架(11)-菜单展开折叠状态持久化
32 / 0 / 创建于 3个月前
mirahs 的个人博客
现在当我们把菜单折叠然后再刷新浏览器，菜单又回到默认的展开状态了。我们要把展开折叠状态持久化，让它在下次进入时为关闭前的状态。为了实现这个目标，我们要引入
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 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：