目录
-
安装pinia
yarn add pinia
# 或者使用 npm
npm install pinia
-
使用pina
- main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from "@/router/index"
import { store, key } from "@/store"
import pinia from "@/pinia"
import ElementPlus from 'element-plus'
import * as Icons from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
//全局引入css
import '@/assets/glob.css'
const app = createApp(App)
app.use(pinia)
app.use(ElementPlus)
app.use(router)
app.use(store, key)
app.mount('#app')
Object.keys(Icons).forEach((key) => {
// console.log(key);
app.component(key, Icons[key as keyof typeof Icons])
})
- pinia/index.ts //pinia定义持久化数据
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPluginPersist)
export default pinia
- pinia/home/index.ts
import { defineStore } from 'pinia'
export const homeStore = defineStore('home', {
state: () => ({
active: '',
isCollapse: false,
menus: []
}),
getters: {
getActive: (state) => state.active,
getCollapse: (state) => state.isCollapse,
getMenus: (state) => state.menus,
},
actions: {
setActive(active: string) {
this.active = active
},
setCollapse(isCollapse: boolean) {
this.isCollapse = isCollapse
},
setMenus(menus: any) {
this.menus = menus
}
},
//这段代码需要安装pinia持久化插件
persist: {
enabled: true,
strategies: [
{
key: 'cloud_home',
storage: localStorage
}
]
}
})
-
pinia本地持久化插件安装
npm i pinia-plugin-persist --save
-
pinia本地存储持久化
pinia/index.ts只需要加上备注以下的代码就能完成,可以指定storage策略
persist: {
enabled: true,
strategies: [
{
key: 'cloud_home',
storage: localStorage
}
]
}
-
使用pinia
<template>
<div class="common-layout">
<el-container>
<!--侧边栏-->
<el-aside :width="isCollapse ? '64px' : '200px'">
<el-scrollbar>
<MenuBar :menuList="menuList"></MenuBar>
</el-scrollbar>
</el-aside>
<el-container>
<!--头部-->
<el-header>
<Header></Header>
</el-header>
<!--右侧主体-->
<el-main>
<TabBar></TabBar>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script lang="ts" setup true>
import { computed, reactive, ref } from 'vue';
import { useRouter, useRoute, RouteLocationMatched } from 'vue-router';
import { homeStore } from '@/pinia/home';
import { menusAPI } from '@/utils/api'
import Header from '@/components/layout/Header.vue';
import MenuBar from '@/components/layout/MenuBar.vue';
import TabBar from '@/components/layout/TabBar.vue';
const router = useRouter()
const homeSt = homeStore()
const isCollapse = computed(() => {
return homeSt.getCollapse
})
const menuList = computed(() => {
//获取pinia数据
return homeSt.menus
})
function goHome() {
router.push("/login")
}
getMenu()
function getMenu() {
menusAPI().then(({ data }) => {
if (data.code == 500) {
router.push("/login")
}
if (data.menus && data.menus.length > 0) {
//登陆成功操作pinia
homeSt.setMenus(data.menus)
}
})
}
</script>
<style lang="scss" scoped>
.el-aside {
// background: #486586;
height: 600px;
border-bottom: none;
}
.el-header {
display: flex;
align-items: center;
color: #000000;
border-radius: 5px;
margin-bottom: 3px;
border: 1px solid #dddfe6;
}
.el-main {
border-radius: 5px;
border: 1px solid #dddfe6;
--el-main-padding: 0px;
}
</style>