位置: IT常识 - 正文

快速搞懂Pinia及数据持久化存储(详细教程)

编辑:rootadmin
快速搞懂Pinia及数据持久化存储(详细教程) 一.安装及使用Pinia

推荐整理分享快速搞懂Pinia及数据持久化存储(详细教程),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

1.安装Pinia两种方式都可,根据个人习惯来

npm install piniayarn add pinia

2.在main.ts 中引入并挂载到根实例

// src/main.tsimport { createApp } from 'vue'import App from './App.vue'import { createPinia } from 'pinia'// 创建Vue应用实例// 实例化 Pinia// 以插件形式挂载Pinia实例createApp(App).use(createPinia()).mount('#app')

3.src目录下新建store/study/index.js并写入

Store 是用defineStore()定义的,它的第一个参数是一个独一无二的id,也是必须传入的,Pinia 将用它来连接 store 和 devtools。

defineStore()第二个参数可接受两类值:Setup函数或Options对象

state 属性: 用来存储全局的状态的,这里边定义的,就可以是为SPA里全局的状态了。

getters属性:用来监视或者说是计算状态的变化的,有缓存的功能。

actions属性:对state里数据变化的业务逻辑,需求不同,编写逻辑不同。说白了就是修改state全局状态数据的。

第一种Options式写法:

import { defineStore } from 'pinia'// `defineStore()` 的返回值命名最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾export const useStudyStore = defineStore('studyId', { state: () => { return { counter: 0, } }, getters:{}, actions:{}})

在Options式中:Store 的数据(data),getters 是 Store 的计算属性(computed),而actions则是 Store 的方法(methods)。

快速搞懂Pinia及数据持久化存储(详细教程)

第二种Setup式写法:

import { defineStore } from 'pinia'// `defineStore()` 的返回值命名最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾export const useStudyStore = defineStore('studyId', ()=>{ const count = ref(0) const name = ref('Ghmin') const computedTest= computed(() => count.value * 99) function int() { count.value++ } return { count, name, computedTest, int}})

在Setup式中:ref()成为state属性,computed()变成getters,function变成actions

4.使用Store

使用上面两种方式其中一种后,便可以在组件中使用Store了。

<script setup>import { useStudyStore } from '@/stores/study'const store = useStudyStore();</script>二.具体使用及属性与方法

1.定义数据

import { defineStore } from 'pinia'export const useStudyStore = defineStore('studyId', { state: () => { return { name: 'Ghmin', num:0 } },})

2.组件中使用

<template><div><h1>vue组件</h1>{{ name }}</div></template><script setup>import { useStudyStore } from '@/stores/study'const store = useStudyStore();let { name } = store;</script>

注:pinia可以直接修改state数据,无需像vuex一样通过mutations才可以修改,所以上面的let { name } = store 这种解构是不推荐的,因为它破坏了响应性。

而为了从 Store 中提取属性,同时保持其响应性,这里需要使用storeToRefs(),它将为每个响应性属性创建引用。当你只使用 Store 的状态而不调用任何action时,它会非常有用。使用方法如下

<template><div><h1>vue组件</h1>{{ name }}</div></template><script setup>//这里需要先引入import { storeToRefs } from 'pinia'import { useStudyStore } from '@/stores/study'const store = useStudyStore();//这样解构的属性将保持响应性let { name } = storeToRefs(store);// name.value 可以直接修改到Store中存储的值</script>

如果有多条数据要更新状态,推荐使用$patch方式更新。因为Pinia的官方网站,已经明确表示$ patch的方式是经过优化的,会加快修改速度,对程序的性能有很大的好处。

<template><div><h1>A组件</h1>{{ num}}{{ arr }}<button @click='btn'>按钮</button></div></template><script setup>import { storeToRefs } from 'pinia'import { useStudyStore } from '@/stores/study'const store = useStudySlet { num,arr } = storeToRefs(store);const btn = ()=>{//批量更新store.$patch(state=>{state.num++;state.arr.push({name:'Ghmin'});})}</script>

actions:对state里数据变化的业务逻辑,需求不同,编写逻辑不同。说白了就是修改state全局状态数据的。

import { defineStore } from 'pinia'export const useStudyStore = defineStore('studyId', { state: () => { return { num: 0 } }, getters:{}, actions:{ changeNum( val ){ this.num+= val; } }})<template><div><h1>使用actions</h1>{{ num}}<button @click='add'>加99</button></div></template><script setup>import { storeToRefs } from 'pinia'import { useStudyStore } from '@/stores/study'const store = useStudyStore();let { num} = storeToRefs(store);const add = ()=>{store.changeNum(10);}</script>

getters:和vuex的getters几乎类似,用来监视或者说是计算状态的变化的,有缓存的功能。

import { defineStore } from 'pinia'export const useStudyStore = defineStore('studyId', { state: () => { return { num: 0, } }, getters:{ numGetters(){ return this.counter + 999; } }, actions:{}})<template><div> <h1>getters的使用</h1>{{ num}}{{ numGetters}}</div></template><script setup>import { storeToRefs } from 'pinia'import { useStudyStore } from '@/stores/study'const store = useStudyStore();let { num,numGetters} = storeToRefs(store);</script>

三.数据持久化存储

使用pinia-plugin-persist实现数据持久化存储,具体使用请跳转Pinia持久化存储

http://t.csdn.cn/N8l9c

本文链接地址:https://www.jiuchutong.com/zhishi/297555.html 转载请保留说明!

上一篇:利用openpose提取自建数据集骨骼点训练st-gcn,复现st-gcn(openpose的输出)

下一篇:万字综述梳理ChatGPT----一文搞懂弄潮儿ChatGPT技术原理、行业现状、投资前景(一万字综述怎么写)

  • 华为畅享50pro怎么切换上网卡(华为畅享50pro怎么设置时间)

    华为畅享50pro怎么切换上网卡(华为畅享50pro怎么设置时间)

  • 如何隐藏抖音商城(如何隐藏抖音商品橱窗)

    如何隐藏抖音商城(如何隐藏抖音商品橱窗)

  • b站hd版和普通版的区别(b站hd和普通有什么区别)

    b站hd版和普通版的区别(b站hd和普通有什么区别)

  • word分栏怎么做(word分栏怎么两栏独立编辑)

    word分栏怎么做(word分栏怎么两栏独立编辑)

  • 苹果信任了验证不了(苹果信任验证失败)

    苹果信任了验证不了(苹果信任验证失败)

  • 苹果11qq音乐怎么设置桌面歌词(苹果11qq音乐怎么不被中断)

    苹果11qq音乐怎么设置桌面歌词(苹果11qq音乐怎么不被中断)

  • qq发图片怎么重命名(qq图片怎么重新发送)

    qq发图片怎么重命名(qq图片怎么重新发送)

  • 竹子众淘是什么样的平台(竹子众淘是个什么东西)

    竹子众淘是什么样的平台(竹子众淘是个什么东西)

  • 华为mate30pro下面三个键怎么设置(华为mate30pro下面屏幕不亮了)

    华为mate30pro下面三个键怎么设置(华为mate30pro下面屏幕不亮了)

  • 微信怎么拒绝某个人加我(微信怎么拒绝某人语音电话)

    微信怎么拒绝某个人加我(微信怎么拒绝某人语音电话)

  • 安卓手机黑屏怎么解决(安卓手机黑屏怎么恢复)

    安卓手机黑屏怎么解决(安卓手机黑屏怎么恢复)

  • vivo还原桌面布局的方法是什么(vivo 桌面布局怎么恢复出厂设置)

    vivo还原桌面布局的方法是什么(vivo 桌面布局怎么恢复出厂设置)

  • oppoa7x语音助手怎么唤醒(oppo a7x语音助手)

    oppoa7x语音助手怎么唤醒(oppo a7x语音助手)

  • 退出icloud照片没了(icloud退出登录后照片没有了)

    退出icloud照片没了(icloud退出登录后照片没有了)

  • p40可以用4g吗(华为p40可以使用4g吗)

    p40可以用4g吗(华为p40可以使用4g吗)

  • pc设备是什么意思(电脑pcl设备)

    pc设备是什么意思(电脑pcl设备)

  • 华为手机文件管理中的文档是什么(华为手机文件管理怎么放到桌面)

    华为手机文件管理中的文档是什么(华为手机文件管理怎么放到桌面)

  • 苹果x忘记锁屏密码怎么办(苹果X忘记锁屏密码怎么办)

    苹果x忘记锁屏密码怎么办(苹果X忘记锁屏密码怎么办)

  • exc的升序降序在哪里(excel升序降序后怎么还原)

    exc的升序降序在哪里(excel升序降序后怎么还原)

  • 电脑待机图片怎么设置(电脑待机图片怎么设置壁纸)

    电脑待机图片怎么设置(电脑待机图片怎么设置壁纸)

  • 苹果x出厂版本是多少(苹果x出厂版本是什么)

    苹果x出厂版本是多少(苹果x出厂版本是什么)

  • 抖音直播怎么提现(抖音直播怎么提现到微信)

    抖音直播怎么提现(抖音直播怎么提现到微信)

  • mate30可以自己下载谷歌服务吗(华为mate30怎么下载第三方软件)

    mate30可以自己下载谷歌服务吗(华为mate30怎么下载第三方软件)

  • 蚂蚁森林时光加速器能提前多久(蚂蚁森林时光加速器加速多久)

    蚂蚁森林时光加速器能提前多久(蚂蚁森林时光加速器加速多久)

  • 陌陌设备封号是不是就得换手机了(陌陌封号对设备的影响)

    陌陌设备封号是不是就得换手机了(陌陌封号对设备的影响)

  • 联想键盘灯怎么开(联想键盘灯怎么换颜色)

    联想键盘灯怎么开(联想键盘灯怎么换颜色)

  • 陌陌怎么不能视频(陌陌怎么不能视频聊天了)

    陌陌怎么不能视频(陌陌怎么不能视频聊天了)

  • 开小卖部怎么报税
  • 发票丢失第一联盖章能用么
  • 增值税发票记账联和抵扣联都丢了怎么办
  • 高新企业如何申报纳税
  • 钱已付票未收到分录怎么做
  • 汇算清缴a107020表
  • 利润表研发费用包括哪些内容
  • 记账凭证是不是会计凭证
  • 单式记账法是什么意思呀
  • 家电以旧换新怎么做账务处理
  • 商业折扣如何开票
  • 会计利润和税务利润不一致
  • 固定资产报废需要在固定资产系统中
  • 航空公司票价怎么定的
  • 核定征收的企业可以享受税收优惠吗
  • 4s店上牌费用怎么给
  • 已付款无法收到发票怎么处理
  • 其他综合收益会计科目编码
  • 腾讯手游助手怎么卸载
  • 广告公司车身广告
  • 抵押物转让的法律规定
  • 白醋洗脸有什么好处
  • 商业承兑汇票提示承兑期限
  • 俄勒冈州邮编
  • kprcycleaner.exe是什么
  • 对于企业已经入账而银行尚未入账
  • php set_time_limit
  • node.txt
  • 怎么安装vue环境
  • 非流动资产增加说明什么原因
  • 第二季度企业所得税怎么计提
  • php替换文本指定内容
  • win11电源高性能模式代码
  • thinkphp版本区别
  • 运输费计税吗
  • python创建自定义函数
  • mysql 5.6安装教程
  • python创建ndarray
  • 劳务派遣工资的发放单位
  • 教育培训学校是什么意思
  • 预计资产负债表和预计利润表构成了整个财务预算
  • 什么情况下核定应纳税额
  • 发票已交税如何退税
  • 工程结算科目
  • 新公司开基本户需要带什么材料
  • sql查询排名前三
  • PostgreSQL教程(十七):客户端命令(1)
  • 库存现金太多违反什么规定
  • 开具红字专用发票理由
  • 固定资产折旧计算方法公式大全
  • 服装、眼镜、鞋、西药的发票如何做账较好?
  • 银行的结息怎么做会计分录
  • 各种会计凭证的填制
  • sql server修改数据表
  • winxp设置在哪
  • win7系统玩英雄联盟黑屏怎么办
  • gcf是什么软件的文件
  • linux error 27:unrecognized command
  • 电脑window8系统怎么样
  • macos 安装win7
  • win7访问共享文件夹没有权限访问
  • 消除类策略游戏
  • js模拟登录网站
  • 游戏编程设计模拟软件
  • 表单javascript
  • python让用户选择
  • js原生实现call
  • python中list的用法例子
  • python的导入
  • Custom List in inspector, displaying data your way[Unity]
  • domReady的实现案例
  • Unity3D游戏开发pdf
  • android studio 无法解析 aar
  • python动态加载py
  • 发票 字体
  • 美国买房hoa
  • 广东省税务机关规定小额零售需开发票吗
  • 税控盘怎么变更
  • 个人所得税app密码给别人有风险吗
  • 个体户国税地税怎么交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设