Vue3中的Pinia——管理应用程序的全局状态

介绍Pinia

Pinia 是 Vue.js 的状态管理库,主要用于管理应用程序的全局状态。它是 Vuex 的替代品,提供了更简单和更灵活的 API。Pinia 的主要作用包括:

  • 1. 状态管理:Pinia 允许你在应用中集中管理状态,方便不同组件之间共享数据。
  • 2. 响应式:Pinia 的状态是响应式的,任何对状态的更改都会自动更新依赖于该状态的组件。
  • 3. 模块化:你可以将状态分成多个 store,每个 store 可以管理不同的状态和逻辑,使得代码更清晰和可维护。
  • 4. 插件支持:Pinia 支持插件,可以扩展其功能,例如持久化状态、调试等。
  • 5. TypeScript 支持:Pinia 对 TypeScript 有良好的支持,提供类型推导和类型检查。
     

安装 pinia

yarn add pinia
# 或者使用 npm
npm install pinia

具体实现步骤 

在main.js里面导入Pinia并创建pinia实例(根 store) 并将其传递给应用:

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

Store

store介绍

Store:Store 是一个用于管理状态的容器。每个 store 可以看作是一个模块,负责管理特定的状态、计算属性和行为(即方法)

定义store

基本操作

src下新建store文件,里面加上counter.js文件

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'// defineStore('仓库的唯一标识', () => {声明数据state、声明操作数据的方法 action、
// 声明基于数据派生的计算属性 getters。最后return}) // 这本质上定义了一个函数,可以导出
export const useAlertsStore = defineStore('alerts', () => {const count = ref(100)const str = ref("hello pinia")const addcount = () => {count.value++}const double = computed(() => count.value * 2) // 箭头函数单行语句不用return直接返回// const double = computed(() => {count.value * 2}) 如果加了{}就不会返回,要在前面添                // 加一个returnreturn{count,str,addcount,double}
})

 在APP.vue中使用

<script setup>
import Son01 from '@/components/Son01.vue';
import Son02 from '@/components/Son02.vue';
// 导入 useAlertsStore函数
import {useAlertsStore} from '@/store/counter'
const tore = useAlertsStore()
console.log(tore);</script>
<template><div>{{ tore.count }}的两倍为 {{ tore.double }}</div><button @click="tore.addcount">+</button><div>{{ tore.str }}</div><h1>这是在app.vue组件中</h1><Son01></Son01><Son02></Son02>
</template><style scoped></style>

注意不能随意解构tore:const { count, msg } = tore数据就会丢失响应式

以下是tore对象

store的解构 

如果是解构属性就用storeToRefs,解构方法就直接解构,解构的目的就是为了简化xxx.xxx的方式来调用属性或方法

<script setup>
import { storeToRefs } from 'pinia'
const store = useCounterStore()// `name` 和 `doubleCount` 是响应式的 ref
const { name, doubleCount } = storeToRefs(store)// 作为 action 的 increment 可以直接解构
const { increment } = store
</script>

action异步写法

下载axios

npm add axios 

import { defineStore } from "pinia";
import axios from "axios";
import { ref } from "vue";
export const useChannelStore = defineStore('channel', () => {const channellist = ref([])const getlist = async () => {const {data:{data:{channels : uname}}} = await axios.get('http://geek.itheima.net/v1_0/channels')// 解构时传给的变量unameconsole.log(uname);channellist.value = uname;      }return {channellist,getlist}
})

 app.vue中导入

<script setup>
// 导入channel
import {useChannelStore} from '@/store/channel'
const ChannelStore = useChannelStore()</script><template><button @click="ChannelStore.getlist">点击</button><ul><li v-for="item in ChannelStore.channellist" :key="item.id">{{ item.name }}</li></ul>
</template><style scoped></style>

持久化处理

参考文档链接

下载pinia-plugin-persistedstate插件

npm i pinia-plugin-persistedstate

在main.js里面将插件添加到pinia 实例中:

import { createApp } from 'vue'
import { createPinia } from 'pinia'// 导入持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'import App from './App.vue'const pinia = createPinia()
const app = createApp(App)app.use(pinia.use(piniaPluginPersistedstate)) // 添加持久化插件
app.mount('#app')

 在声明的store里面,设置新选项 :{persist:true}

import { defineStore } from 'pinia'
import { ref } from 'vue'export const useStore = defineStore('main',() => {const someState = ref('hello pinia')return { someState }},{persist: true,},
)

 配置完以上,在页面里点击刷新,页面内容都不变 

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

leetcode:验证回文串

[题目链接] string func(string s)//先将大写转换成小写&#xff0c;并且去除空格等&#xff0c;只保留小写字母 {string tmp;string::iterator it s.begin();while (it ! s.end()){//大写字母if (*it < 90 && *it>65)//A-Z的ASCII码为65-90{tmp *it 32;//a-z…

Redis存储原理

前言 我们从redis服务谈起&#xff0c;redis是单reactor&#xff0c;命令在redis-server线程处理。还有若干读写IO线程负责IO操作&#xff08;redis6.0之后&#xff0c;Redis之pipeline与事务&#xff09;。此外还有一个内存池线程负责内存管理、一个后台文件线程负责大文件的关…

大数据Flink(一百一十八):Flink SQL水印操作(Watermark)

文章目录 Flink SQL水印操作&#xff08;Watermark&#xff09; 一、为什么要有WaterMark 二、​​​​​​​​​​​​​​Watermark解决的问题 三、​​​​​​​​​​​​​​代码演示 Flink SQL水印操作&#xff08;Watermark&#xff09; 一、​​​​​​​为什么…

《黑神话悟空》黄眉打法技巧图文攻略详解

​黄眉是黑神话悟空第三章的关底的boss&#xff0c;很多的玩家都非常的好奇这个boss到底要怎么打&#xff0c;这里小编就为大家带来了黄眉这个boss的打法&#xff0c;我们不要使用法术&#xff0c;只使用禁字诀就可以击败这个boss&#xff0c;详细的内容可以在这里进行了解和查…

DevEco Profiler调优工具(二)

一、Profiler调优模板 3、Snapshot Insight 4、CPU Insight 5、Frame Insight 6、Launch Insight

硬件(驱动开发)

一、OSC基本架构&#xff08;片上系统&#xff09; OSC&#xff08;On-chip System Control&#xff0c;片上系统控制&#xff09;基本架构通常涉及片上系统中的各个组件如何进行协调与控制&#xff0c;以实现高效的处理、通信和管理。OSC架构在现代微处理器和系统单芯片&…

WebApi开发中依赖注入和RESTful 详解

Web API 开发中的依赖注入和 RESTful 详解 在现代 Web API 开发中&#xff0c;依赖注入&#xff08;Dependency Injection, DI&#xff09;和 RESTful 架构 是两个极为重要的概念。本文将详细探讨它们的定义、应用场景及在 Web API 开发中的最佳实践。 一、依赖注入 (Depende…

[PICO VR眼镜]眼动追踪串流Unity开发与使用方法,眼动追踪打包报错问题解决(Eye Tracking/手势跟踪)

前言 最近在做一个工作需要用到PICO4 Enterprise VR头盔里的眼动追踪功能&#xff0c;但是遇到了如下问题&#xff1a; 在Unity里面没法串流调试眼动追踪功能&#xff0c;根本获取不到Device&#xff0c;只能将整个场景build成APK&#xff0c;安装到头盔里&#xff0c;才能在…

【java面向对象二】static(一)

文章目录 前言一、static修饰成员变量二、static修饰成员变量的应用场景三、static修饰成员方法四、搞懂main方法总结 前言 学习static修饰类变量&#xff0c;类方法&#xff0c;以及main方法的使用。 一、static修饰成员变量 static 叫静态&#xff0c;可以修饰成员变量&…

高密原型验证系统解决方案(下篇)

0 引言 我们在上篇中和大家探讨了用户在进行大规模 复杂 SoC 设计原型验证时在全局时钟及复位同步&#xff0c; 大规模设计分割以及高速接口与先进 Memory 控制 器 IP 验证等方面遇到的关键困难&#xff0c;并提出了相应的 解决方案帮助用户来克服这些困难。接下来我们会 和用户…

Django ORM(多表)

文章目录 前言一、关联关系模型二、一对多写入数据二、多对多写入数据二、跨表查询1.查找test 标签的文章2.查找作者名为 test 的文章及标签 三、跨表删除 前言 表与表之间的关系可分为以下三种&#xff1a; 一对一: 一对一关系表示一个模型的每个实例与另一个模型的每个实例…

华为OD机试 - 字符串划分(Java 2024 E卷 100分)

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;E卷D卷A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加…

Python | Leetcode Python题解之第416题分割等和子集

题目&#xff1a; 题解&#xff1a; class Solution:def canPartition(self, nums: List[int]) -> bool:n len(nums)if n < 2:return Falsetotal sum(nums)if total % 2 ! 0:return Falsetarget total // 2dp [True] [False] * targetfor i, num in enumerate(nums…

最低成本的游戏串流方案分享 如何自己打造云电脑?

今天教大家如何最低成本实现串流 出门在外也可以随时随地游玩端游大作 硬件准备&#xff1a;一台电脑 手机/平板一台 软件&#xff1a;Gameviewer远程 为啥不用moonlight等其他软件呢 因为设置公网穿透等复杂操作对小白来说不太友好 而GameViewer从安装到使用仅需一键 对比同类…

MATLAB系列07:输入/输入函数

MATLAB系列07&#xff1a;输入/输入函数 8. 输入/输入函数8.1 函数textread8.2 关于load和save命令的进一步说明8.3 MATLAB文件过程简介8.4 文件的打开和关闭8.4.1 fopen函数8.4.2 fclose函数 8.5 二进制 I/O 函数8.5.1 fwrite 函数8.5.2 fread函数 8.6 格式化 I/O 函数8.6.1 f…

【C++ 差分数组 前后缀分解】P7404家庭菜园

本文涉及知识点 C差分数组 C前后缀分解 P7404家庭菜园 出自洛谷&#xff0c;我简述一下。 已知数组a&#xff0c;长度为n(1<n<2e5),1 <a[i] <1e9。一次操作如下&#xff1a;将a[i…j]全1。问最少操作多少次&#xff0c;使得a成为山形数组&#xff0c;即存在k&am…

力扣题解2332

大家好&#xff0c;欢迎来到无限大的频道。 今日继续给大家带来力扣题解。 题目描述&#xff08;中等&#xff09;​&#xff1a; 坐上公交的最晚时间 给你一个下标从 0 开始长度为 n 的整数数组 buses &#xff0c;其中 buses[i] 表示第 i 辆公交车的出发时间。同时给你一…

算法题——最小会议室数量

题目1: 1.假定会议时间从凌晨零点开始&#xff0c;即 0<si<ei<1440&#xff0c;si和ei代表当天某一时刻从零点开始计算的开始和结束分钟数&#xff0c;如[90,360]&#xff0c;表示会议时间从1:30到6:00。 2.不考虑房间的容量问题&#xff0c;并且公司为了提升大家的体…

计算机组成原理-存储系统(二)半导体存储器

2.1DAM芯片 分类&#xff1a; DRAM芯片&#xff1a;使用栅极电容存储信息SRAM芯片&#xff1a;使用双稳态触发器存储信息 核心区别&#xff1a;储存元不一样 2.2DRAM和SRAM的比较 对于DRAM中&#xff1a; 1&#xff1a;电容内存储了电荷0&#xff1a;电容内未存储电荷 DR…

HTML讲解(一)body部分

目录 1.什么是HTML 2.HTML基本框架 3.标题声明 4.修改标题位置 5.段落声明 6.修改段落位置 7.超链接访问 8.图像访问 9.改变网页背景及文本颜色 10.添加网页背景图 11.超链接改变颜色 12.设置网页边距 小心&#xff01;VS2022不可直接接触&#xff0c;否则&#xff…