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 协议》,转载必须注明作者和本文链接
推荐文章: