Pinia

最新推荐文章于 2025-03-09 20:15:23 发布
最新推荐文章于 2025-03-09 20:15:23 发布
阅读量1k 收藏 8
点赞数 25
文章标签： vue.js 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2302_80244686/article/details/143456306
版权

文章目录

学习总结

一、简介

  1. 概念：Pinia是Vue的存储库，它允许您跨组件/页面共享状态，与 vuex 功能一样
  2. 安装：npm i pinia

二、搭建Pinia环境

import { createPinia } from 'pinia'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)

三、存储+读取数据

  1. store是一个保存：状态、业务逻辑的实体，每个组件都可以读取、写入它
  2. 有三个概念：state、getter、action，相当于组件中的：data、computed和methods
  3. store是一个用reactive包裹的对象，这意味着不需要在getter之后写.value，但是，就像setup中的props一样，不能对其进行解构
  4. 具体编码：
// src/store/count.ts
import { defineStore } from "pinia";
export const useCountStore = defineStore("count", {
    // 动作
    actions: {},
    state: () => {
        return {
            sum: 0,
        };
    },
    // 计算
    getters: {}
});


// src/store/talk.ts
import { defineStore } from "pinia";
export const useTalkStore = defineStore("talk", {
    // 动作
    actions: {},
    // 状态
    state() {
        return {
            talkList: [
                { id: 'tuwei01', title: '今天你有点怪，哪里怪？怪好看的！' },
                { id: 'tuwei02', title: '草莓、蓝莓、蔓越莓，今天你想我了没？' },
                { id: 'tuwei03', title: '心里给你留了一块地，我的死心塌地' }
            ]
        };
    },
    // 计算
    getters: {}
});

四、三种修改数据的方式

import { ref } from 'vue'
// 引入store
import { useCountStore } from '@/store/count'
// 使用
const countStore = useCountStore()

// 数据
let n = ref(1)  // 用户选择的数字

// 方法
function add() {
    // 第一种修改方式：直接修改
    countStore.sum += Number(n.value)

    // 第二种修改方式：批量修改
    countStore.$patch({
        sum: countStore.sum + Number(n.value),
        address: '中国'
    })

    // 第三种修改方式：借助action修改（action中可以编写一些业务逻辑）
    countStore.increment(n.value)
}

function minus() {
    countStore.sum -= n.value
}

<div class="count">
        <h3>欢迎来到：{{ countStore.school }},坐落于{{ countStore.NewYork }}</h3>
        <h2>当前求和为：{{ countStore.sum }}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">+</button>
        <button @click="minus">-</button>
    </div>

import { defineStore } from "pinia";
export const useCountStore = defineStore("count", {
    // 第三种
    // actions里面放置的是一个一个方法，用于响应组件中的“动作”
    actions: {
        increment(value) {
            if (this.sum < 10) {
                // 修改数据（this是当前的store对象）
                this.sum++
            }
        }
    },
    // 真正存储数据的地方
    state: () => {
        return {
            sum: 0,
            school: 'HIST',
            address: 'NewYork'
        };
    },
    // 计算
    getters: {}
});

五、storeToRefs

借助storeToRefs将store中的数据转为ref对象，方便在模版中使用
注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中数据

import { ref } from 'vue'
import { storeToRefs } from 'pinia'
// 引入store
import { useCountStore } from '@/store/count'
// 使用
const countStore = useCountStore()
const { sum, school, address } = storeToRefs(countStore)


// 数据
let n = ref(1)  // 用户选择的数字

// 方法
function add() {
    // 第三种修改方式
    countStore.increment(n.value)
}

function minus() {
    countStore.sum -= n.value
}

 <div class="count">
        <h3>欢迎来到：{{ school }},坐落于{{ NewYork }}</h3>
        <h2>当前求和为：{{ sum }}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">+</button>
        <button @click="minus">-</button>
    </div>

六、getters

  1. 概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置
  2. 追加getters配置
import { defineStore } from "pinia";

export const useCountStore = defineStore("count", {
    // actions里面放置的是一个一个方法，用于响应组件中的“动作”
    actions: {
        increment(value:number) {
            if (this.sum < 10) {
                // 修改数据（this是当前的store对象）
                this.sum++
            }
        }
    },
    // 真正存储数据的地方
    state: () => {
        return {
            sum: 0,
            school: 'HIST',
            address: 'NewYork'
        };
    },
    // 计算
    getters: {
        bigSum(state){
            return state.sum * 10
        },
        upperSchool():string{
            return this.school.toUpperCase()
        }
    }
});

import { ref } from 'vue'
import { storeToRefs } from 'pinia'
// 引入store
import { useCountStore } from '@/store/count'
// 使用
const countStore = useCountStore()
const { sum, school, address, bigSum, upperSchool } = storeToRefs(countStore)


// 数据
let n = ref(1)  // 用户选择的数字

// 方法
function add() {
    // 第三种修改方式
    countStore.increment(n.value)
}

function minus() {
    countStore.sum -= n.value
}

七、action

  1. action相当于组件中的methods，可以使用defineStore()中的actions属性定义，并且他们非常适合定义业务逻辑
  2. actions支持异步操作的，可以编写异步函数

八、$subscribe订阅

<div class="talk">
    <button @click="getLoveTalk">获取一个土味情话</button>
    <ul>
        <li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.title }}</li>
    </ul>
</div>

import { reactive } from 'vue'
import { useTalkStore } from '@/store/loveTalk';

const talkStore = useTalkStore()
// const talkList = reactive(useTalkStore().talkList)

talkStore.$subscribe((mutate, state) => {
    console.log('talkStore里保存的数据发生了变化', mutate, state);
    localStorage.setItem('talkList',JSON.stringify(state.talkList))
})

function getLoveTalk() {
    talkStore.getATalk()
}

import { defineStore } from "pinia";
import axios from 'axios'
import { nanoid } from "nanoid";

export const useTalkStore = defineStore("talk", {
    // 动作
    actions: {
        async getATalk() {
            let { data } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
            this.talkList.unshift({ id: nanoid(), title: data.content })
        }
    },
    // 状态
    state() {
        return {
            talkList: JSON.parse(localStorage.getItem('talkList') as string) || []
        };
    },
    // 计算
    getters: {}
});

九、store组合式写法

import { defineStore } from "pinia";
import axios from 'axios'
import { nanoid } from "nanoid";
import { reactive } from "vue";

// export const useTalkStore = defineStore("talk", {
//     // 动作
//     actions: {
//         async getATalk() {
//             let { data } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
//             this.talkList.unshift({ id: nanoid(), title: data.content })
//         }
//     },
//     // 状态
//     state() {
//         return {
//             talkList: JSON.parse(localStorage.getItem('talkList') as string) || []
//         };
//     },
//     // 计算
//     getters: {}
// });

export const useTalkStore = defineStore('talk', () => {
    // talkList就是state
    const talkList = reactive(
        JSON.parse(localStorage.getItem('talkList') as string) || []
    )

    // getATalk函数相当于action
    async function getATalk() {
        let { data } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
        this.talkList.unshift({ id: nanoid(), title: data.content })
    }

    return {
        talkList,
        getATalk
    }
})

下周计划

下周开始小组官网，vue感觉学的不是很好，还需要多复习复习

本周总结

本周就一个字忙！小组和纪检部两边都需要带新生，各种事情忙的团团转，今天去看了一下社团招新领到了小玩意
在这里插入图片描述

pinia学习笔记pinia学习笔记
03-15
pinia学习笔记pinia学习笔记
vite+vue3动态模块化导入并使用pinia
03-25
在现代前端开发中，Vue3、Vite和Pinia是三个关键的技术组件，它们共同构建了一个高效、灵活的开发环境。下面将详细讲解这三个技术及其结合使用的方式。 **Vue3** 是Vue.js框架的最新版本，它带来了许多性能优化和新...
Pinia 状态管理库的使用方法
最新发布
xuukai的博客
03-09 977
在 Pinia 中，状态管理通过定义 Store 来实现。
Pinia使用
m0_64107427的博客
02-29 497
官方地址：Pinia | The intuitive store for Vue.js (vuejs.org)https://pinia.vuejs.org/ Pinia是一个基于Vue 3的状态管理库，它使得管理Vue的全局状态变得更加容易和直观。而pinia-plugin-persistedstate是 Pinia 的官方插件之一，它提供了一种将 Pinia 状态持久化到本地存储的方式，以确保状态数据在刷新或关闭页面后仍然存在。换句话说，Pinia是用于管理Vue 3应用程序的状态管理库，而pini
大壮考了小帅 5 道 Pinia 必问面试题
07-06
【Pinia 框架详解】 Pinia 是一个针对 Vue.js 3 的状态管理库，它设计的主要目的是简化应用程序中的状态管理。Pinia 基于 Vue.js 3 的新特性和 TypeScript 支持，提供了更为高效和类型安全的方式来管理应用的状态。 ...
vue3+ts+less+vite+pinia+axios基础封装项目模版
03-26
Vue 3 Vue 3是Vue.js的最新版本，带来了许多改进和新特性，包括更快的性能、更小的体积、更好的TypeScript支持以及...Pinia是Vue.js的状态管理库，是Vuex的轻量级替代方案。它提供了直观和简洁的API，使得状态管理
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
【第21章】Vue实战篇之Pinia(状态管理库)
zjg
06-20 770
在后端开发的时候，我们的拦截器排除了注册和登录接口，针对其他接口的调用需要提供token信息才能访问，我们需要在前端中保存token的状态，而Pinia是Vue核心团队开发的，也是目前官方推荐的，这就是我们Pinia的主要原因。token.js// 你可以任意命名 `defineStore()` 的返回值，但最好使用 store 的名字，同时以 `use` 开头且以 `Store` 结尾。// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
Pinia入门
m0_65209547的博客
08-03 233
简单来说pinia就是类似与vuex的状态管理工具。用于实现项目公共数据的存储读取，一般用来搭配vue3项目，同时也兼容vue2。相比于vuex，pinia简化了一些东西，更适用于中小型项目。废话不多说，正片开始......
Pinia 详解
qq_43649937的博客
01-17 945
pinia
Pinia基础
weixin_61697263的博客
06-15 231
state - 存储数据getters - 处理数据actions - 处理业务逻辑，同步异步都支持。
Pinia 介绍、使用、实践
Lyrelion的博客
02-28 3959
Pinia 介绍、使用、实践
Pinia使用详解
weixin_48746746的博客
03-11 1112
Pinia本质上依然是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样）。
“从零开始：Pinia快速入门指南“！！
weixin_42190182的博客
07-30 869
Pinia 是一个专为 Vue 3 设计的状态管理库，它的设计目标是提供一个更简洁、更直观的 API，使得状态管理变得更容易理解和使用。它的前身 是Vuex5,它是Vuex5的下一个迭代实验，它实现了Vuex5中的大部分功能。它最大特点是轻量级： 相比于 Vuex，Pinia 更加轻量，没有不必要的抽象层，这有助于提高性能和减小包大小。
Pinia的使用方法及持久化存储
m0_64373473的博客
11-08 533
Pinia是什么？与vuex有什么区别？怎么使用以及如何做持久化存储
【pinia】新一代更好用的状态管理器Pinia
zhaochen1127的博客
04-21 2832
Pinia的设计主要是服务于Composite API（组合式API）的，相当于下一带的Vuex。因为Vuex主要是为了vue2种的选项是API服务的所以，并不适用于Vue3。当Vue3伴随着组合式API来到时，Pinia的诞生也就成为了必然，一个全新的用于 Vue的状态管理库Pinia。在Pinia种剔除了mutations，只剩了state，actions，getters，这就省去了很多麻烦。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值