vite+vue+ts+element-plus从零开发管理后台框架(11)-菜单展开折叠状态持久化
19 / 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号
推荐文章：