位置: 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技术原理、行业现状、投资前景(一万字综述怎么写)

  • 国家企业信用信息公示系统查询企业已公示成功?

    国家企业信用信息公示系统查询企业已公示成功?

  • 华为荣耀20青春版和nova5i对比(华为荣耀20青春版上市时间和价格)

    华为荣耀20青春版和nova5i对比(华为荣耀20青春版上市时间和价格)

  • 为什么抖音头像有个抖音符号(为什么抖音头像换了别人看的还是原来那张)

    为什么抖音头像有个抖音符号(为什么抖音头像换了别人看的还是原来那张)

  • QQ被暂时冻结怎么解除(qq被暂时冻结怎么看恢复时间)

    QQ被暂时冻结怎么解除(qq被暂时冻结怎么看恢复时间)

  • iphonex长宽高(iphonex尺寸长宽厘米)

    iphonex长宽高(iphonex尺寸长宽厘米)

  • 小米6能更新安卓10吗(小米6更新安卓不充电)

    小米6能更新安卓10吗(小米6更新安卓不充电)

  • 华为的盲人模式哪里关(华为盲人模式是什么样子的)

    华为的盲人模式哪里关(华为盲人模式是什么样子的)

  • 支付宝寻人功能在哪(支付宝寻人启事在哪里)

    支付宝寻人功能在哪(支付宝寻人启事在哪里)

  • 微信uwp和for windows有什么区别(微信uwp和for windows)

    微信uwp和for windows有什么区别(微信uwp和for windows)

  • 抖音创作内容调整提示怎么办(抖音创作内容调整怎么弄)

    抖音创作内容调整提示怎么办(抖音创作内容调整怎么弄)

  • iphone声音突然变小了(iPhone声音突然变得特别小)

    iphone声音突然变小了(iPhone声音突然变得特别小)

  • geforce mx250相当于什么显卡(geforce mx 250相当什么水平)

    geforce mx250相当于什么显卡(geforce mx 250相当什么水平)

  • windows是什么操作系统(windows是什么操作)

    windows是什么操作系统(windows是什么操作)

  • 华为m5青春版8寸和10寸对比(华为M5青春版8寸平板还有买的吗)

    华为m5青春版8寸和10寸对比(华为M5青春版8寸平板还有买的吗)

  • 怎样打下划线(怎样打下划线符号)

    怎样打下划线(怎样打下划线符号)

  • soul主页访问记录在哪(soul访问记录不见了)

    soul主页访问记录在哪(soul访问记录不见了)

  • 快手戳一下对方能看见吗(快手戳一下对方收到什么提示)

    快手戳一下对方能看见吗(快手戳一下对方收到什么提示)

  • 手机显示hd1什么意思(手机显示hd1啥意思)

    手机显示hd1什么意思(手机显示hd1啥意思)

  • 电脑云盘如何使用(电脑云盘是干什么用的)

    电脑云盘如何使用(电脑云盘是干什么用的)

  • 微信7.0.7什么时候更新(微信7.0.17什么时候更新)

    微信7.0.7什么时候更新(微信7.0.17什么时候更新)

  • 抖音可以通过手机号搜索到用户吗(抖音里能通过手机号搜到人吗)

    抖音可以通过手机号搜索到用户吗(抖音里能通过手机号搜到人吗)

  • 滴滴怎么取消预付车费(滴滴怎么取消预约单)

    滴滴怎么取消预付车费(滴滴怎么取消预约单)

  • 农家乐app功能有什么(农家乐平台)

    农家乐app功能有什么(农家乐平台)

  • Win11如何查看系统是否激活?Windows11检查激活状态三种方法(win11怎么看电脑配置)

    Win11如何查看系统是否激活?Windows11检查激活状态三种方法(win11怎么看电脑配置)

  • e_srcv03.exe是什么进程 e_srcv03进程是安全程序吗(csrsv.exe是什么)

    e_srcv03.exe是什么进程 e_srcv03进程是安全程序吗(csrsv.exe是什么)

  • 收益性支出和资产的区别
  • 增值税销项税额账务处理
  • 过路费抵扣进项税填在申报表哪里
  • 小规模纳税人企业购进货物和接受应税劳务时
  • 个税汇算清缴包括劳务报酬吗
  • 个人独资企业法人可以变更吗?
  • 小规模纳税人免税销售额
  • 经营活动产生的净现金流量计算公式
  • 增值税申报表在哪里打印
  • 暂估入库原材料成本结转后期发票到怎么处理
  • 汇算清缴调增的金额,如何做会计分录
  • 行政单位收到行政事业性收费,需要上缴国库
  • 车辆保险赔款怎么入账
  • 非税收入一般缴款书可以抵扣吗
  • 公司购入货架如何做账
  • 企业代缴个人所得税打印完税证明
  • 购买的包装物用什么消毒
  • 消费税价外费用的计算
  • 房产税税率及计算方法最新
  • 土地一次开发和二次开发
  • 哪些票据可以抵扣个人所得税
  • 提供餐饮服务的税率
  • 收入确认的
  • 应收账款挂账要开票吗
  • 小企业会计准则和企业会计准则的区别
  • 公司账户转账给个人账户有限额吗?
  • 应付职工薪酬明细表怎么填写
  • 个人劳务费增值税税率是多少2023
  • 业务招待住宿进什么科目
  • 其他综合收益会计科目编码
  • 代销返点如何进行会计处理?
  • 软件开发公司账务怎么做
  • linux c gui
  • phpstudy配置ftp服务器
  • 固定资产转让的账务处理
  • 支持h5浏览器
  • 企业收入的具体表现
  • vue父子组件加载顺序
  • nvm使用教程
  • js监听hover
  • 小规模纳税人广告费是什么票据类型的
  • 收到提供劳务的收入
  • 金融企业呆账核销管理办法
  • 一个金税盘可以用一个用户名和密码开票吗
  • vue中遇到的问题
  • php判断用户是否登录
  • 结转完工产品成本的会计分录
  • 代扣代缴应付职工薪酬账务处理
  • db2 select as
  • 小规模纳税人减按1%征收率征收增值税
  • 软件企业研发费用
  • mysql配置文件my.ini如何创建
  • 工程管理服务属于哪个行业
  • 补交去年工会经费会计分录
  • 主营业务收入净额在哪个报表里面
  • 环境检测费账务处理
  • 住宿费专票可以抵扣进项税吗税率多少
  • 公司费用怎么做账
  • 补交以前年度环保税
  • 工会经费账务处理流程
  • 发票丢失如何处理入账
  • 深入浅出意思
  • Linux下mysql的root密码修改方法
  • xp系统卡到开机画面
  • linux谷歌浏览器安装指令
  • centos禁止用户登录
  • ubuntu20.4 ssh
  • mac购买建议
  • windows10周年纪念版
  • centos怎么安装
  • launch software
  • w10qq图标不显示
  • 电脑导航阻止怎么办
  • win10系统找不到无线网络连接
  • bat ftp上传文件
  • listview的view属性
  • android监听应用打开
  • js的点击事件怎么做
  • jQuery 选择同时包含两个class的元素的实现方法
  • 个税系统崩溃
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设