Vue3 使用 pinia

news2024/10/9 1:34:23

什么是Pinia

Pinia是 Vue 的存储库，它允许您跨组件/页面共享状态，与vuex功能一样。

准备

安装

npm install pinia
或者
yarn add pinia

使用

首先修改main.ts文件

main.ts

import './assets/main.css'

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

const app = createApp(App)
const pinia = createPinia()
// 使用pinia
app.use(pinia)
// 挂载到 #app
app.mount('#app')

现在若有多个组件要使用count组件中的 count 值 和 LoveTalk 组件中的 talkList 值，可使用 Pinia 将这些值存储到一个文件里，使用时直接导入提取即可。
首先在 src 文件夹下创建 store 文件夹用于存放相关ts文件，然后创建useCountStore.ts 和 useTalkListStore.ts文件。

useCountStore.ts

import { defineStore } from "pinia";

export const useCountStore = defineStore("count", {
    actions:{
        increment(value: number){
            if (this.count < 10){
                this.count += value;
            }
        }
    },

    state(){
        return {
            count: 0,
            school:'atguigu',
            address:'宏福科技园'
        }
    },
});

useTalkListStore

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

export const useTalkListStore = defineStore("talkList", {
    actions:{
        async getATalk(){
            let {data:{content:title}}  = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json');
            let obj = {id: nanoid(), title}
            this.talkList.unshift(obj);
        }
    },

    state(){
        return {
            talkList: [
                {id:'ftrfasdf01',title:'今天你有点怪，哪里怪？怪好看的！'},
                {id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓，今天想我了没？'},
                {id:'ftrfasdf03',title:'心里给你留了一块地，我的死心塌地'}
            ]
        }
    },
});

使用定义在store中的数据。

Count.vue

<script lang="ts" setup name="Count">
    import { ref } from 'vue';
    import { useCountStore } from '@/store/useCountStore';
    import { storeToRefs } from 'pinia';

    let countStore = useCountStore();
    let n = ref(1);

    let { count, address, school } = storeToRefs(countStore);
    function add() {
        //第一种修改数据方式
        // countStore.count += n.value;
        // countStore.address = '北京市海淀区';
        // countStore.school = '清华大学';
        //第二种修改数据方式

        // countStore.$patch({
        //     count: countStore.count + n.value,
        //     address: '北京市海淀区',
        //     school: '清华大学'
        // });

        //第三种修改数据方式
        countStore.increment(n.value);
    }

    function minus() {
    }
</script>

<template>
    <div class="count">
        <!-- <h1>Count: {{ countStore.count }}</h1>
        <h2>地址: {{ countStore.address }}， 名称: {{ countStore.school }}</h2> -->
        <h1>Count: {{ count }}</h1>
        <h2>地址: {{ address }}， 名称: {{ school }}</h2>
        <button @click="add">加</button>
        <button @click="minus">减</button>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
</template>

<style scoped>
    .count {
        background-color: skyblue;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
    select,button {
        margin: 0 5px;
        height: 25px;
    }
</style>

LoveTalk.vue

<script lang="ts" setup name="LoveTalk">
    import axios from 'axios';
    import { reactive } from 'vue';
    import { nanoid } from 'nanoid';
    import { useTalkListStore } from '@/store/useTalkListStore';
    
    let talkListStore = useTalkListStore();

    function addTalk() {
        talkListStore.getATalk();
    }
</script>

<template>
    <div class="talk">
        <h2>LoveTalk</h2>
        <ul>
            <li v-for="talk in talkListStore.talkList" :key="talk.id"> {{ talk.title }} </li>
        </ul>

        <button @click="addTalk">获取一条土味情话</button>
    </div>
</template>

<style scoped>
    .talk {
        background-color: orange;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
</style>

上面两个组件实现了一个计数器和展示土味情话功能。Count组件中 select 标签中若不使用.number将字符串转化为数字，在点击 “加”按钮时会使用字符串拼接方式，例如选择2后，点击“加”后，数字就变成了字符串12。

实现效果

在这里插入图片描述

getters

useCountStore.ts

如果对 state 中的数据不满意，想要添加数据时，可以用getters方式，修改useCountStore.ts代码

import { defineStore } from "pinia";

export const useCountStore = defineStore("count", {
    actions:{
        increment(value: number){
            if (this.count < 10){
                this.count += value;
            }
        },
        decrement(value: number){
            if (this.count > 0){
                this.count -= value;
            }
        }
    },
    state(){
        return {
            count: 0,
            school:'atguigu',
            address:'宏福科技园'
        }
    },
    // 通过 getters 添加新数据
    getters:{
        // 需要接受 state 作为参数
        bigSum(state){
            return state.count * 2;
        },
        smallSum: state => state.count - 1,
        upperSchool(state){
            return state.school.toUpperCase();
        }
    }
});

Count.vue

修改 Count.vue

<script lang="ts" setup name="Count">
    import { ref } from 'vue';
    import { useCountStore } from '@/store/useCountStore';
    import { storeToRefs } from 'pinia';

    let countStore = useCountStore();
    let n = ref(1);
	
	// 通过 storeToRefs 得到 getters 添加到的数据
    let { count, address, school, bigSum, smallSum, upperSchool } = storeToRefs(countStore);
    function add() {
        //第一种修改数据方式
        // countStore.count += n.value;
        // countStore.address = '北京市海淀区';
        // countStore.school = '清华大学';
        //第二种修改数据方式

        // countStore.$patch({
        //     count: countStore.count + n.value,
        //     address: '北京市海淀区',
        //     school: '清华大学'
        // });

        //第三种修改数据方式
        countStore.increment(n.value);
    }

    function minus() {
        countStore.decrement(n.value);
    }
</script>

<template>
    <div class="count">
        <!-- <h1>Count: {{ countStore.count }}</h1>
        <h2>地址: {{ countStore.address }}， 名称: {{ countStore.school }}</h2> -->
        <h1>Count: {{ count }}</h1>
        <h2>地址: {{ address }}， 名称: {{ school }}</h2>
        <h2>bigSum： {{ bigSum }}</h2>
        <h2>smallSum： {{ smallSum }}</h2>
        <h2>upperSchool： {{ upperSchool }}</h2>
        <button @click="add">加</button>
        <button @click="minus">减</button>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
</template>

<style scoped>
    .count {
        background-color: skyblue;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
    select,button {
        margin: 0 5px;
        height: 25px;
    }
</style>

实现效果

在这里插入图片描述

$subscribe

Vue中可以用watch来监听数据的变化
同理，Pinia的store中的数据发生变化，可以用$subscribe来监听

这一篇，$subscribe+localStorage实现数据存储的案例，来介绍这个API的功能

LoveTalk.vue

<script lang="ts" setup name="LoveTalk">
    import axios from 'axios';
    import { reactive } from 'vue';
    import { nanoid } from 'nanoid';
    import { useTalkListStore } from '@/store/useTalkListStore';
    
    let talkListStore = useTalkListStore();
	//这个API的作用，类似于Vue中的watch，监听store中的数据变化
    talkListStore.$subscribe((mutate, state) => {
        localStorage.setItem('talkList', JSON.stringify(state.talkList));
    })

    function addTalk() {
        talkListStore.getATalk();
    }
</script>

<template>
    <div class="talk">
        <h2>LoveTalk</h2>
        <ul>
            <li v-for="talk in talkListStore.talkList" :key="talk.id"> {{ talk.title }} </li>
        </ul>

        <button @click="addTalk">获取一条土味情话</button>
    </div>
</template>

<style scoped>
    .talk {
        background-color: orange;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
</style>

useTalkListStore.ts

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2197685.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

HTB：Tactics[WriteUP]

HTB：Tactics[WriteUP]

目录 连接至HTB服务器并启动靶机 1.Which Nmap switch can we use to enumerate machines when our ping ICMP packets are blocked by the Windows firewall? 2.What does the 3-letter acronym SMB stand for? 3.What port does SMB use to operate at? 4.What comma…
阅读更多...
Comfyui segmentAnythingUltra V2报错

Comfyui segmentAnythingUltra V2报错

&#x1f385;问题表现及解决方案 Comfyui segmentAnythingUltra V2报错&#xff0c;找不到VITMatte模型&#xff0c;这个报错报的比较模糊&#xff0c;所以花了一点时间找模型。 简单来说&#xff0c;到huggingface上&#xff1a; https://huggingface.co/hustvl/vitmatte-s…
阅读更多...
麒麟系统串口配置篇

麒麟系统串口配置篇

麒麟系统串口配置篇 1.配置串口驱动&#xff08;编译/动态加载串口&#xff09; 解压文件夹,然后在解压后的文件夹所在目录&#xff0c;右键选择打开终端&#xff0c;依次执行以下命令&#xff1a; 以麒麟系统下的CH341串口驱动为例&#xff0c;解压CH341SER_LINUX.zip sudo…
阅读更多...
【微服务】网关 - Gateway（下）（day8）

【微服务】网关 - Gateway（下）（day8）

网关过滤工厂 在上一篇文章中&#xff0c;主要是对网关进行了一个总体的介绍&#xff0c;然后对网关中的断言进行了一个描述。在这篇文章中&#xff0c;主要是对网关中的最后一大核心——过滤进行介绍。 当客户端发送过来的请求经过断言之后&#xff0c;如果还想在请求前后添…
阅读更多...
如何在 MySQL 中处理 BLOB 和 CLOB 数据类型

如何在 MySQL 中处理 BLOB 和 CLOB 数据类型

在 MySQL 数据库中&#xff0c;BLOB&#xff08;Binary Large Object&#xff09;和 CLOB&#xff08;Character Large Object&#xff09;数据类型用于存储大量的二进制数据和字符数据。本篇文章我们来一起看看如何在 MySQL 中处理 BLOB 和 CLOB 数据类型&#xff0c;并加入如…
阅读更多...
7.3美团—Java日常实习面经

7.3美团—Java日常实习面经

7.2晚上投的&#xff0c;发邮件约到了7.3晚上 总时长1小时10分钟左右 自我介绍 拷打项目30min 缓存三兄弟 Redis除了缓存&#xff0c;还能做什么 Redis的数据结构&#xff0c;什么时候用哈希&#xff0c;什么时候用字符串 线程池的执行流程 MySQL索引的数据结构 聚簇索引…
阅读更多...
基于PHP+uniapp微信小程序的个性化影视推荐系统的设计54lfb

基于PHP+uniapp微信小程序的个性化影视推荐系统的设计54lfb

目录 项目介绍技术栈和环境说明具体实现截图php技术介绍文件解析微信开发者工具HBuilderXuniapp开发技术简介解决的思路性能/安全/负载方面数据访问方式PHP核心代码部分展示代码目录结构解析系统测试详细视频演示源码获取 项目介绍 首先要进行需求分析&#xff0c;分析出电影信…
阅读更多...
JUC高并发编程7：辅助类

JUC高并发编程7：辅助类

1 减少计数CountDownLatch 1.1 CountDownLatch 概述 CountDownLatch 是 Java 并发包&#xff08;java.util.concurrent&#xff09;中的一个同步工具类&#xff0c;用于在多个线程之间进行协调。它允许一个或多个线程等待其他线程完成一组操作。 1.1.1 主要方法 CountDownL…
阅读更多...
【重学 MySQL】六十二、非空约束的使用

【重学 MySQL】六十二、非空约束的使用

【重学 MySQL】六十二、非空约束的使用 定义目的关键字特点作用创建非空约束删除非空约束注意事项 在MySQL中&#xff0c;非空约束&#xff08;NOT NULL Constraint&#xff09;是一种用于确保表中某列不允许为空值的数据库约束。 定义 非空约束&#xff08;NOT NULL Constra…
阅读更多...
基于LORA的一主多从监测系统_AHT20温湿度传感器

基于LORA的一主多从监测系统_AHT20温湿度传感器

1&#xff09;AHT20温湿度传感器 这个传感器&#xff0c;网上能找到的资料还是比较多的&#xff0c;我们使用的是HAL硬件i2c&#xff0c;相比于模拟i2c&#xff0c;我们不需要过于关注时序问题&#xff0c;我们只需要关心如何获取数据以及数据如何处理&#xff0c;下面以数据手…
阅读更多...
指针——指针数组、数组指针

指针——指针数组、数组指针

&#xff08;一&#xff09;指针数组 1、本质&#xff1a;指针数组的本质任然是数组 2、基本格式&#xff1a;int* arr[5] 3、应用&#xff1a;如尝试使用指针来模拟二维数组 先来看代码 #include<stdio.h> //指针数组——模拟实现二维数组 int main() {int a[5] {…
阅读更多...
java面向对象之类与对象

java面向对象之类与对象

目录 1.定义一个类 案例:定义一个学生类 1.代码 2.效果 2.类的实例化与使用 1.代码 2.效果 3.访问控制 1)private 2)default 3)protected 4)public 注:如下图 4.封装一个类 案例:封装一个教师类 1)代码 2)效果 5.定义一个构造方法 1)无参数构造 2)有参数构造 3&#xff09;注 6…
阅读更多...
【Java 问题】基础——反射

【Java 问题】基础——反射

接上文 反射 49.什么是反射&#xff1f;应用&#xff1f;原理&#xff1f; 49.什么是反射&#xff1f;应用&#xff1f;原理&#xff1f; 什么是反射&#xff1f; 我们通常都是利用 new 方式来创建对象实例&#xff0c;这可以说就是一种“正射”&#xff0c;这种方式在编译时候…
阅读更多...
HJDQN环境配置

HJDQN环境配置

git clone仓库代码等不做赘述 #创建&#xff0c;激活conda环境即可 conda create -n EAHJDQN python3.6 conda activate EAHJDQN#安装包 pip install mujoco_py2.0.2.8pip install Cython0.29.21pip install torch1.8.1cu111 torchvision0.9.1cu111 torchaudio0.8.1 -f https:/…
阅读更多...
【信息论基础第四讲】信息的流动——平均互信息及其性质

【信息论基础第四讲】信息的流动——平均互信息及其性质

一、平均互信息与互信息 1、互信息 互信息量表示接收到消息yj后&#xff0c;获得关于事件xi的信息量。 2、 从熵的角度来定义平均互信息量&#xff1a; 从信源X熵H(X)到信宿熵H(X|Y)熵减少了&#xff0c;同时为信宿Y提供了信息量&#xff0c;而信息从信源到信宿的变化是流经信…
阅读更多...
每日OJ题_牛客_平方数_数学_C++_Java

每日OJ题_牛客_平方数_数学_C++_Java

目录 牛客_平方数_数学 题目解析 C代码1暴力 C代码2数学 Java代码数学 牛客_平方数_数学 平方数 (nowcoder.com) 描述&#xff1a; 牛妹是一个喜欢完全平方数的女孩子。 牛妹每次看到一个数 x&#xff0c;都想求出离 x 最近的完全平方数 y。 每次手算太麻烦&#xff0c;…
阅读更多...
分享几个国外SSL证书提供商网站

分享几个国外SSL证书提供商网站

国外SSL证书提供商 众所周知兼容性高的SSL证书肯定是在国外申请的&#xff0c;主要确保SSL证书的安全性的同时&#xff0c;对于安全标准在国外相比而言更成熟&#xff0c;保护程度也比较高。 另方面对需要申请的域名没有限制&#xff0c;可选性SSL证书类型种类比较多&#xf…
阅读更多...
[Python学习日记-39] 闭包是个什么东西？

[Python学习日记-39] 闭包是个什么东西？

[Python学习日记-39] 闭包是个什么东西&#xff1f; 简介 闭包现象 闭包意义与作用 简介 在前面讲函数和作用域的时候应该提到过&#xff0c;当函数运行结束后会由 Python 解释器自带的垃圾回收机制回收函数内作用域已经废弃掉的变量&#xff0c;但是在 Python 当中还有一种…
阅读更多...
vulnhub靶场之hackableIII

vulnhub靶场之hackableIII

一.环境搭建 1.靶场描述 Focus on general concepts about CTF Difficulty: Medium This works better with VirtualBox rather than VMware. 2.靶场下载 https://download.vulnhub.com/hackable/hackable3.ova 3.靶场启动 二.信息收集 1.寻找靶场真实的Ip nmap -SP 192.168…
阅读更多...
LingedList＜T＞，自定义泛型

LingedList＜T＞，自定义泛型

LingedList<T>底层采用双向链表数据结构实现的集合（容器）。 数据结构：是计算机在内存中组织数据的一种方式。 分类： 线性数据结构： 数组：存储同类型数据的大小固定的集合。 列表（List）：动态大小的数组，可以灵活的添加，删除元素。 链表（LinkedList）：分…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023