Pinia的使用技巧

一、安装
npm install pinia
二、main.ts引入
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'const app = createApp(App)
app.use(createPinia())
app.mount('#app')
三、定义参数
import { defineStore } from 'pinia'type User = {name: string,age: number
}const peo: User = {name: 'cqs',age: 23
}const login = (): Promise<User> => {return new Promise(resolve => {setTimeout(() => {resolve(peo)}, 2000)})
}export const useTestStore = defineStore('user', {state: () => {return {name: 'cqs',age: 23,user: <User>{}}},getters: {getNewName():string {return `好名字:${this.name}-${this.getAge}`},getAge():number {return this.age}},actions: {setName(name: string) {this.name = name;},async setUser() {const user = await login()this.user = user}}
})
四、store使用

1.直接获取

<script setup lang="ts">
import { useTestStore } from '../store'const user = useTestStore();console.log(user.age)
</script>

2.通过storeToRefs 获取

<script setup lang="ts">
import { storeToRefs } from 'pinia'
const { name, age } = storeToRefs(user)
</script>

3.$patch修改

<script setup lang="ts">
import { useTestStore } from '../store'const user = useTestStore();user.$patch({name: '123'
})
user.$patch((state)=>{state.name = '456'
})
</script>

4.直接修改

<script setup lang="ts">
import { useTestStore } from '../store'const user = useTestStore();user.name = '123'
</script>

5.通过$state修改

<script setup lang="ts">
import { useTestStore } from '../store'const user = useTestStore();
//重写需要参数都传
user.$state = {name: 'qwe',age: 234,user: {name: '123',age: 23}}
</script>
五、回滚数据
<script setup lang="ts">
import { useTestStore } from '../store'const user = useTestStore();user.$reset()
</script>
六、监听数据变化
<script setup lang="ts">
import { useTestStore } from '../store'const user = useTestStore();//监听数据改变
user.$subscribe((args, state)=>{console.log(args);console.log(state);
}, {detached: true, //页面销毁,方法不会销毁deep: true,flush: 'post'
})//监听调用actions,第二个参数true页面销毁,方法不会销毁
user.$onAction((args)=>{args.after(()=>{console.log('监听调用数据改变之后');})console.log(args);
}, true)
</script>
七、添加浏览器缓存,避免刷新页面数据消失

修改main.ts

import { createApp, toRaw } from 'vue'
import App from './App.vue'
import { createPinia, PiniaPluginContext } from 'pinia'const app = createApp(App)type Option = {key: string
}const PiniaPlugin = (option: Option) => {return (context: PiniaPluginContext) => {const { store } = context;const data = localStorage.getItem('pinia-' + option.key + store.$id);store.$subscribe(() => {localStorage.setItem('pinia-' + option.key + store.$id, JSON.stringify(toRaw(store.$state)))})return {...(data ? JSON.parse(data) : {})}}
}const store = createPinia();
store.use(PiniaPlugin({ key: 'cqs' }))
app.use(store)
app.mount('#app')

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

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

相关文章

只狼 资源分享

版本介绍 v1.06版|容量15GB|官方简体中文|支持键盘.鼠标.手柄|赠官方原声4首BGM|赠多项修改器|赠一周目全义手忍具强化通关存档|2020年01月15号更新 只狼中文设置&#xff1a; https://jingyan.baidu.com/article/cb5d6105bc8556005d2fe048.html 只狼键盘对应按键&#xff1…

windows本地dockr的clickhouse链接本地mysql服务,连接不上

不想看过成的&#xff0c;解决办法在最后面 报错信息&#xff1a; SQL 错误 [1000] [08000]: Poco::Exception. Code: 1000, e.code() 0, Exception: Connections to all replicas failed: test1localhost:3306 as user root (version 21.12.3.32 (official build)) , serve…

C# WPF上位机开发(掌握一点c#基础)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 wpf虽然比较简单&#xff0c;但是最好还是要有一点c#的基础比较好。本身wpf有点类似于web开发&#xff0c;前端和html差不多&#xff0c;后端则和j…

SpringBoot事务处理

一、事务回顾 回顾地址&#xff1a; 深入理解数据库事务&#xff08;超详细&#xff09;_数据库事务操作_Maiko Star的博客-CSDN博客 事务&#xff1a; 是一组操作的集合&#xff0c;是一个不可分割的工作单位&#xff0c;这些操作要么同时成功&#xff0c;要么同时失败 事…

绝对干货-讲讲设计模式之创建型设计模式的本质

创建型模式&#xff08;Creational Patterns&#xff09;&#xff1a;创建型模式关注对象的创建机制&#xff0c;包括了如何实例化一个对象或者一组对象的方法。Java中的创建型模式有&#xff1a;单例模式&#xff08;Singleton Pattern&#xff09;、工厂模式&#xff08;简单…

隐写-MISC-bugku-解题步骤

——CTF解题专栏—— 题目信息&#xff1a; 题目&#xff1a;隐写 作者&#xff1a;CyberFl0wer 提示&#xff1a;无 解题附件&#xff1a; 解题思路&#xff1a; 这张图片一看&#xff01;哦呦~背景还是透明的&#xff0c;那我肯定要尝试给他换换色&#xff08;不可以色色.jpg…

重生之我是一名程序员 42——字符分类函数

哈喽啊大家晚上好&#xff01;今天呢给大家带来一些超简单的知识&#xff0c;大家是需要浅浅理解就行了。所以今天给大家带来的知识是——字符分类函数。 首先呢还是给大家介绍一下它们&#xff0c;字符分类函数是一种函数&#xff0c;它根据一定的规则将字符分组或分类。在编…

Map和Set小总结【温习】

目录 一、概念与模型 二、Map的使用 三、Set的说明 一些小练习 四、哈希表 1.概念 2.冲突 2.1、概念 2.2、冲突-->避免 2.3、冲突-->解决 &#xff08;1&#xff09;闭散列 &#xff08;2&#xff09;开散列 2.4、其他问题 一、概念与模型 1.概念&#xff1a…

三菱GX WORRKS3 下载与安装

目录 下载 安装 准备好安装包 对电脑系统要求 安装 因为小编公司需要&#xff0c;所以开始了三菱plc软件的学习&#xff0c;并从今天开始记录学习&#xff0c;希望小编的内容能帮到你&#xff0c;对你的学习有帮助&#xff01; 下载 三菱电机官网 当然了&#xff0c;需要…

编程语言发展史:Java语言的出现和发展

预计更新 第一部分&#xff1a;早期编程语言 1.1布尔代数和机器语言 1.2汇编语言的出现和发展 1.3高级语言的兴起 第二部分&#xff1a;主流编程语言 1.1 C语言的诞生及其影响 1.2 C语言的发展和应用 1.3 Java语言的出现和发展 1.4 Python语言的兴起和特点 1.5 JavaScript语言…

C++函数题

短信计费 #include<bits/stdc.h> using namespace std; int n; int f(int); int main() {cin>>n;int sum0;for(int i0;i<n;i){int t;cin>>t;sumsumf(t);}cout<<sum;return 0; } int f(int a){int cnt1;cntcntn/70;return cnt*0.1; } 完数判断 #i…

【C++】类和对象(下篇)

这里是目录 构造函数&#xff08;续&#xff09;构造函数体赋值初始化列表 explicit关键字隐式类型转换 static成员友元友元函数友元类 内部类匿名对象匿名对象的作用const引用匿名对象 构造函数&#xff08;续&#xff09; 构造函数体赋值 在创建对象时&#xff0c;编译器通…

五种多目标优化算法(MOGWO、MOLPB、MOJS、NSGA3、MOPSO)求解微电网多目标优化调度(MATLAB代码)

一、多目标优化算法简介 &#xff08;1&#xff09;多目标灰狼优化算法MOGWO 多目标应用&#xff1a;基于多目标灰狼优化算法MOGWO求解微电网多目标优化调度&#xff08;MATLAB代码&#xff09;-CSDN博客 &#xff08;2&#xff09;多目标学习者行为优化算法MOLPB 多目标学习…

C/C++: 统计整数

【问题描述】 输入若干个整数&#xff0c;统计出现次数最多的那个整数。如果出现最多的整数有两个以上&#xff0c;打印最早输入的那个整数。 【输入形式】 从标准输入读取输入。第一行只有一个数字N&#xff08;1≤N≤10000&#xff09;&#xff0c;代表整数的个数。以后的N行…

佳易王幼儿园缴费系统软件编程应用实例

佳易王幼儿园缴费系统软件编程实例 佳易王幼儿园缴费系统功能&#xff1a; 1、系统设置 2、班级设置 3、其他费用名称 4、学生信息管理 5、学生缴费 6、统计报表 7、备份全部数据 软件试用版下载可以点击下方官网卡片

48. 旋转图像 --力扣 --JAVA

题目 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 解题思路 顺时针旋转90度 上下翻转 对角线翻转&#xff1b;两次两层循环…

由走“贸工技”的联想联想到传统OEM,带给了自己那些思考?

2022年1月16日&#xff0c;自己来到魔都的第1597天&#xff0c;这城市还是保持着相似的容颜&#xff0c;而自己却悄悄的起了变化。 以前对时间概念其实不是特别敏感&#xff0c;感觉自己有大把的时光可以浪费&#xff08;虽然知道死亡是个永远无法逃避的话题&#xff09;&#…

【华为OD】【统一考试C卷真题】100%通过:剩余银饰的重量 python 源码实现

【华为OD】【统一考试C卷真题】100%通过&#xff1a;剩余银饰的重量 python 源码实现 目录 题目描述&#xff1a; 示例1 示例2 代码实现&#xff1a; 题目描述&#xff1a; 有N块二手市场收集的银饰&#xff0c;每块银饰的重量都是正整数&#xff0c;收集到的银饰会被熔…

MATLAB 和 Simulink 官方文档下载地址

MATLAB 官方文档中文版下载网址&#xff1a; https://ww2.mathworks.cn/help/pdf_doc/matlab/index.html 如图&#xff1a; MATLAB 官方文档英文版下载网址&#xff1a; https://ww2.mathworks.cn/help/pdf_doc/matlab/index.html?langen 如图&#xff1a; Simulink 官…

Vue - Vue配置proxy代理,开发、测试、生产环境

1、新建三个环境的配置文件 在src同级目录也就是根目录下新建文件&#xff1a;.env.development&#xff08;开发环境&#xff09;、.env.test&#xff08;测试环境&#xff09;、.env.production文件&#xff08;生产环境&#xff09; 2、三个环境的配置文件 开发环境 .env…