Pinia 基础使用
环境:
Vue3
Pinia
安装
pnpm install pinia
创建 store
在项目入口文件 src/main.ts 中创建一个 store,并将其挂载到 Vue 应用上。
// src/main.ts
import {createPinia} from 'docs/developer/plugins/Pinia'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')
export {pinia}
创建 state
在 src 目录下创建一个 store 文件夹,并在该文件夹下创建一个 user.js 文件,用于创建 user store。
// src/stores/menuConfig.ts
import { ref } from 'vue'
import { defineStore } from 'pinia'
// 定义整个菜单配置
export const useMenuConfigStore = defineStore('menuConfig', () => {
// 菜单是否折叠
const collapsed = ref(false)
// 主题色
const theme = ref('light')
// 切换菜单折叠
const toggleCollapsed = () => {
collapsed.value = !collapsed.value
}
return {
collapsed,
toggleCollapsed,
theme
}
})
使用 store
在 src 目录下创建一个 views 文件夹,并在该文件夹下创建一个 Home.vue 文件,用于展示用户信息。
<template>
<div>
<a-button type="link" style="width: 100%" @click="menuConfig.toggleCollapsed()">
<MenuUnfoldOutlined v-if="collapsed" />
<MenuFoldOutlined v-else />
</a-button>
</div>
</template>
<script lang="ts" setup>
// 引入store
import {useMenuConfigStore} from "@/stores/menuConfig";
import {computed} from "vue";
const menuConfig = useMenuConfigStore()
// 如果直接使用menuConfig.collapsed来展示值的话是不需要定义成computed计算属性的
let collapsed = computed(() => menuConfig.collapsed);
</script>