Pinia学习笔记

「已注销」

已于 2022-10-17 16:08:15 修改

阅读量621

点赞数

文章标签：学习前端

于 2022-07-16 14:43:57 首次发布

本文链接：https://blog.csdn.net/JimHome/article/details/125819054

版权

本文档详细介绍了 Pinia 的安装、Store 定义与使用、State 的管理、Getter 的定义与应用，以及 Action 的定义与执行。通过组合式 API 和选项式 API，展示了如何在前端项目中操作和管理状态，包括初始化、修改、重置 State，以及利用 Getter 和 Action 进行数据获取和业务逻辑处理。

摘要由CSDN通过智能技术生成

Pinia官方中文文档

一、安装

安装 Pinia

通过以下命令使用 npm 包管理器安装 Pinia

npm install pinia

使用 Pinia

创建一个Pinia实例并传给应用程序

//main.js

import { creatPinia } from 'pinia'

app.use(creatPinia())

二、Store

定义 Store

通过从pinia模块解构的defineStore()函数进行定义，该函数的第一个参数name，也称为id，是必要的，Pinia使用它来将store连接到devtools。将返回的函数命名为use...是跨可组合项的约定。

//stores/userStore.js

import { defineStore } from 'pinia'

export const useUserStore = defineStore('userStore', {
    //...
})

使用 Store

选项式 API 中通过setup()使用

import { useUserStore } from '@/stores/userStore'

export default {
    setup() {
        const user = useUserStore()
        return {
            user
        }
    }
}

组合式 API 中使用

<script setup>
import { useUserStore } from '@/stores/userStore'

const user = useUserStore()

</script>

从 Store 中解构属性并同时保持其响应式

组合式 API

<script setup>
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/userStore'

const user = useUserStore()
const { name, age } = storeToRefs(user)

</script>

使用setup()的选项式 API

import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/userStore'

export default {
    setup() {
        const user = useUserStore()
        const { name, age } = storeToRefs(user)
        return {
            name,
            age
        }
    }
}