【Pinia】Vue新一代状态管理工具的基本概念及使用

基本概念

概念	描述
Pinia	Vue 的专属状态管理库，允许跨组件或页面共享状态
本质	Vue上更好用的状态管理
官网	https://pinia.vuejs.org/zh/

初始化

1、安装 Pinia

npm i pinia

2、main.js 中引入 pinia

import { createApp } from 'vue'
import { createPinia } from "pinia";
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

// 挂载 pinia
app.use(pinia)
app.mount('#app')

3、store文件夹下新建 xxxStore，可以用不同的 xxxStore 文件管理不同状态

/**
 * Author: Bug笔记
 * Email：foreverox@vip.qq.com
 * CreateTime: 2024-07-21 22:36
 * Description：
 */
// 引入pinia
import { defineStore } from "pinia";
// xxx部分自定义名称
export const useXxxxStore = defineStore('xxxx', {
    state: () => {
        return {
            key: 'value'
        }
    },
    getters: {
        // 第一种方式
        函数名: () => {},
        // 第二种方式
        函数名(){ },
    },
    actions: {
         函数名() {  }
    }
})

调用

概念	描述
引入store	const store = useXxxxStore()
使用state属性	store.attribute
调用getters	store.functionName
调用actions	store.functionName()

三种修改状态方式

概念	生效时间	描述
$patch	立即生效	store.$patch( state => { state.attribute = value })
直接修改	非立即	state.attribute = value
actions	执行完	store.functionName(value)

解构

概念	描述
导入mapStores依赖	import { mapStores } from 'pinia'
导入整个Store	computed: { ...mapStores(useCartStore) }

欢迎关注

• 全平台同名：Bug笔记，欢迎关注获取更多干货知识