vue 搭建 pinia

文章目录

  • 环境设置
  • 存储+读取数据
  • 【 storeToRefs】借助storeToRefs将store中的数据转为ref对象,方便在模板中使用
  • 【getters】当state中的数据,需要经过处理后再使用时,可以使用getters配置
  • 【$subscribe】通过 store 的 $subscribe() 方法侦听 state`及其变化
  • store组合式写法

环境设置

作用:简单来说(有了一个新的存储数据和方法的空间)
第一步:npm install pinia

第二步:操作src/main.ts

import { createApp } from 'vue'
import App from './App.vue'/* 引入createPinia,用于创建pinia */
import { createPinia } from 'pinia'/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)/* 使用插件 */{}
app.use(pinia)
app.mount('#app')

此时开发者工具中已经有了pinia选项
在这里插入图片描述

存储+读取数据

  1. Store是一个保存:状态业务逻辑 的实体,每个组件都可以读取写入它。

  2. 它有三个概念:stategetteraction,相当于组件中的: datacomputedmethods

  3. 具体编码:src/store/count.ts
    (就是有一个文件可以进行 存储数据,操作数据方法,)

// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useCountStore = defineStore('count',{// 动作actions:{},// 状态state(){return {sum:6}},// 计算getters:{}
})
  1. 具体编码:src/store/talk.ts
// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useTalkStore = defineStore('talk',{// 动作actions:{},// 状态state(){return {talkList:[{id:'yuysada01',content:'你今天有点怪,哪里怪?怪好看的!'},{id:'yuysada02',content:'草莓、蓝莓、蔓越莓,你想我了没?'},{id:'yuysada03',content:'心里给你留了一块地,我的死心塌地'}]}},// 计算getters:{}
})
  1. 组件中使用state中的数据
<template><h2>当前求和为:{{ sumStore.sum }}</h2>
</template><script setup lang="ts" name="Count">// 引入对应的useXxxxxStore	import {useSumStore} from '@/store/sum'// 调用useXxxxxStore得到对应的storeconst sumStore = useSumStore()
</script>
<template><ul><li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.content }}</li></ul>
</template><script setup lang="ts" name="Count">import axios from 'axios'import {useTalkStore} from '@/store/talk'const talkStore = useTalkStore()
</script>

【 storeToRefs】借助storeToRefs将store中的数据转为ref对象,方便在模板中使用

  • 借助storeToRefsstore中的数据转为ref对象,方便在模板中使用。
  • 注意:pinia提供的storeToRefs只会将数据做转换,而VuetoRefs会转换store中数据。
<template><div class="count"><h2>当前求和为:{{sum}}</h2></div>
</template><script setup lang="ts" name="Count">import { useCountStore } from '@/store/count'/* 引入storeToRefs */import { storeToRefs } from 'pinia'/* 得到countStore */const countStore = useCountStore()/* 使用storeToRefs转换countStore,随后解构 */const {sum} = storeToRefs(countStore)
</script>

【getters】当state中的数据,需要经过处理后再使用时,可以使用getters配置

  1. 概念:当state中的数据,需要经过处理后再使用时,可以使用getters配置。

  2. 追加getters配置。

// 引入defineStore用于创建store
import {defineStore} from 'pinia'// 定义并暴露一个store
export const useCountStore = defineStore('count',{// 动作actions:{/************/},// 状态state(){return {sum:1,school:'atguigu'}},// 计算getters:{bigSum:(state):number => state.sum *10,upperSchool():string{return this. school.toUpperCase()}}
})

组件中读取数据:

const {increment,decrement} = countStore
let {sum,school,bigSum,upperSchool} = storeToRefs(countStore)

【$subscribe】通过 store 的 $subscribe() 方法侦听 state`及其变化

talkStore.$subscribe((mutate,state)=>{console.log('LoveTalk',mutate,state)localStorage.setItem('talk',JSON.stringify(talkList.value))
})

store组合式写法

import {defineStore} from 'pinia'
import axios from 'axios'
import {nanoid} from 'nanoid'
import {reactive} from 'vue'export const useTalkStore = defineStore('talk',()=>{// talkList就是stateconst talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || [])// getATalk函数相当于actionasync function getATalk(){// 发请求,下面这行的写法是:连续解构赋值+重命名let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把请求回来的字符串,包装成一个对象let obj = {id:nanoid(),title}// 放到数组中talkList.unshift(obj)}return {talkList,getATalk}
})

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SAP与易链SRM系统集成案例

一、项目环境 重庆润通控股&#xff08;集团&#xff09;有限公司成立于2007年&#xff0c;是一家集合汽柴油动力及终端、摩托车、储能电源、汽车零部件、金融服务等产业的多元化集团公司。现拥有员工超4000人&#xff0c;业务遍布全球80多个国家及地区&#xff0c;2021年营…

文件加密软件谁好用丨2024文件加密软件TOP6推荐

在数字化时代&#xff0c;数据安全已成为企业和个人不可忽视的重要议题。随着数据泄露事件频发&#xff0c;文件加密软件成为了保护敏感信息的首选工具。 本文将为您推荐2024年度最值得信赖的六大文件加密软件&#xff0c;帮助您选择最适合自己需求的加密工具。 1. 域智盾 软…

手机容器化 安装docker

旧手机-基于Termux容器化 1、安装app 在手机上安装Termux或ZeroTermux&#xff08;Termux扩展&#xff09; 1.1 切换源 注&#xff1a;可以将termux进行换源&#xff0c;最好采用国内源&#xff0c;例如&#xff1a;清华源等 更新包列表和升级包&#xff08;可选&#xff0…

数智驱动丨zAIoT 连续落地军工、科研院所和机械制造场景,推动数智化转型升级...

引言 在这个万物互联的时代&#xff0c;科技的进步正以不可阻挡之势&#xff0c;深刻地影响并重塑我们的生产和生活方式。数智化转型升级在各个领域展现出强大的动力&#xff0c;已经成为推动社会向前发展的关键力量。 最近&#xff0c;云和恩墨自主研发的数据智能分析处理平台…

FUSE(用户空间文件系统)命令参数

GPT-4 (OpenAI) FUSE (Filesystem in Userspace)是一个允许创建用户空间文件系统的接口。它提供了一个API&#xff0c;让开发者在未修改内核代码的情况下&#xff0c;通过自己的程序实现文件系统。FUSE 文件系统通常通过 mount 命令来挂载&#xff0c;而且这个命令可以接受各…

时序分解 | Matlab基于ESMD极点对称模态分解

时序分解 | Matlab基于ESMD极点对称模态分解 目录 时序分解 | Matlab基于ESMD极点对称模态分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 ESMD&#xff08;Extreme-point Symmetric Mode Decomposition&#xff09;是一种信号分解方法&#xff0c;用于提取信号中的模…

【C语言之高级编程】如何将指定变量或函数编译至固定的内存区域中?

如何将指定变量或函数编译至固定的内存区域&#xff1f; 1. 内存类型1.1 bss段&#xff08;Block Started by Symbol&#xff09;1.2 data段&#xff08;data segment&#xff09;1.3 text段&#xff08;code segment/text segment&#xff09;1.4 dec1.5 堆&#xff08;heap&a…

华为模拟器ensp中USG6000V防火墙web界面使用

防火墙需要配置 新建拓扑选择USG6000V型号 在防火墙中导包 忘记截图了 启动设备 输入用户名密码 默认用户名&#xff1a;admin 默认密码&#xff1a;Admin123 修改密码 然后他会提示你是否要修改密码&#xff0c;想改就改不想改就不改 进入命令行界面 进入系统视图开启web…

7个外贸网站模板

Nebula独立站wordpress主题 Nebula奈卜尤拉wordpress主题模板&#xff0c;适合搭建外贸独立站使用的wordpress主题。 https://www.jianzhanpress.com/?p7084 Starling师大林WordPress独立站模板 蓝色橙色风格的WordPress独立站模板&#xff0c;适合做对外贸易的外贸公司搭建…

【C++】类和对象--类,实例化,this指针

文章目录 前言一、类1.1 类的定义1.2 类的书写和使用1.3 访问限定符1.4 类域 二、实例化2.1 实例化概念2.2 对象大小 三.this指针总结 前言 前面的几篇文章我们介绍了命名空间&#xff0c;inline&#xff0c;nullptr等C 中常见的的基础概念。今天的文章我们来介绍一些C中类与对…

数据结构 —— BellmanFord算法

数据结构 —— BellmanFord算法 BellmanFord算法检测负权值环BellmanFord和Dijkstra思想上的区别Dijkstra算法的思想Bellman-Ford算法的思想思想上的对比 我们今天来看一个算法BellmanFord算法&#xff0c;我们之前的Dijkstra算法只能用来解决正权图的单源最短路径问题。 Bell…

C语言入门基础题:奇偶 ASCII 值判断(C语言版)和ASCII码表,什么是ASCII码,它的特点和应用?

1.题目描述&#xff1a; 任意输入一个字符&#xff0c;判断其 ASCII 是否是奇数&#xff0c;若是&#xff0c;输出 YES &#xff0c;否则&#xff0c;输出 NO例如&#xff0c;字符 A 的 ASCI 值是 65 &#xff0c;则输出 YES &#xff0c;若输入字符 B(ASCII 值是 66)&#xff…

数据库的学习(5)

题目&#xff1a; 1、新增员工表emp和部门表dept create table dept (deptl int,dept name varchar(11)) charsetutf8; create table emp (sid int,name varchar(11),age int,worktime start date,incoming int,dept2 int) charsetutf8; insert into dept values (101,财务), (…

Matlab中如何添加OptiluX?

1、打开Matlab&#xff0c;依次点击“新建”&#xff0c;“工程”&#xff0c;“从SVN”。 2、存储库路径输入&#xff1a; p/optilux/code - Revision 80: /trunk 同时在“源代码控制集成”菜单中选择“SVN (1.9)” 3、沙盒选择一个自己建的文件夹即可。 来源&#xff1a;Opt…

特征值究竟体现了矩阵的什么特征?

特征值究竟体现了矩阵的什么特征&#xff1f; 简单来说就是x经过矩阵A映射后和自己平行 希尔伯特第一次提出eigenvalue,这里的eigen就是自己的。所以eigenvalue也称作本征值 特征值和特征向量刻画了矩阵变换空间的特征 对平面上的任意向量可以如法炮制&#xff0c;把他在特征…

集创北方ICN6202 低功耗MIPIDSI转2 PORT LVDS 支持1080P分辨率,成熟批量产品

ICN6202描述&#xff1a; ICN6202是一个接收MIPIDSI输入和发送LVDS输出的桥接芯片。MIPIDSI最多支持4个车道&#xff0c;每个车道的最大运行频率为1Gbps&#xff1b;总最大输入带宽为4Gbps&#xff1b;并且还支持MIPI定义的ULPS&#xff08;超低功耗状态&#xff09;。ICN6202…

Elasticsearch集群搭建

集群概念 在单台 ES 服务器上&#xff0c;随着一个索引内数据的增多&#xff0c;会产生存储、效 率、安全等问题。 因此引入集群 我们需要将索引拆分成多份&#xff0c;分别放入不同的服务器中&#xff0c;此时这几台服务器维护了同一个索引&#xff0c;我们称这几台服务器为一…

计算机毕业设计Python深度学习游戏推荐系统 Django PySpark游戏可视化 游戏数据分析 游戏爬虫 Scrapy 机器学习 人工智能 大数据毕设

本论文的主要研究内容如下&#xff1a; 了解基于Spark的TapTap游戏数据分析系统的基本架构&#xff0c;掌握系统的开发方法&#xff0c;包括系统开发基本流程、开发环境的搭建、测试与运行等。 主要功能如下&#xff1a; &#xff08;1&#xff09;用户管理模块&#xff1a…

初阶数据结构—排序

第一章&#xff1a;排序的概念及其运用 1.1 排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有…

LIO-SAM编译ubuntu20.04 Noetic

一、下载 mkdir -p ~/lio_sam_ws/src cd ~/lio_sam_ws/src git clone https://github.com/TixiaoShan/LIO-SAM.git cd ..二、编译&&解决报错 catkin_make报错如下 解决方案&#xff1a; 第一步&#xff1a; sudo add-apt-repository ppa:borglab/gtsam-release-4…