vite+vue+pinia 状態管理

目次

ピニアをインストールする

ピナを使う

pinia ローカル永続化プラグインのインストール

pinia ローカル ストレージの永続化 

ピニアを使用する

---

• ピニアをインストールする

yarn add pinia
# 或者使用 npm
npm install pinia

• ピナを使う

• 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

• ピニア/ホーム/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 は次のコードを追加するだけで完成し、ストレージ戦略を指定できます。

persist: {
        enabled: true,
        strategies: [
            {
                key: 'cloud_home',
                storage: localStorage
            }
        ]
    }

• ピニアを使用する

<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>