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

  • 城建附加的计税依据
  • 企业纳税申报表怎么查询
  • 长期股权投资产生的投资收益属不属于非经常性损益
  • 增值税税控系统技术维护费怎么做账
  • 销售货物开票及销售收入
  • 一般纳税人金税盘抵税会计分录
  • 上年少计提工会经费本年怎么调整
  • 单位全额承担社保相当于领生活费了吗
  • 普通发票金额和申报工资有关系吗
  • 小企业准则汇兑损失计入什么科目
  • 贷款买车需要到银行去吗
  • 费用的增加会减值吗
  • 失业稳岗补贴要交所得税吗
  • 建筑业统一发票可以抵扣吗
  • 企业开具的增值税专用发票属于
  • 股票收入要交税的后果有哪些
  • 计提年终奖金的会计分录怎么写
  • 维修费用的税率
  • 企业一次性补助金是多少标准
  • 金蝶标准版期末结转过不去
  • 非独立核算分公司企业所得税
  • 河道管理费入什么科目
  • 企业微信收入也要交税吗
  • 营业收入销售收入计算公式
  • 主营业务利润计算
  • 运输公司租赁车辆怎么做账
  • 可转债溢价率多高为好
  • 关于商品退换
  • 金融服务的手续费要交税吗
  • 应交税金减免税款
  • 无形资产的确认与计量
  • 受托代销商品会计科目
  • 固定资产抵债交不交增值税
  • 潘塔纳尔湿地的成因
  • php定时执行代码
  • php注释的主要作用是什么?
  • 银行汇票和银行本票的区别
  • 固定资产是指什么
  • thinkphp框架入门
  • js怎么制作
  • 待转销销项税额是什么
  • 直接进入税金及附加的科目
  • 财政补助收入分录
  • 所有者权益总计怎么算沙盘
  • 自然人所属税务机关怎么选
  • 注册资本为
  • 门店有营业执照仓库加工要办营业执照
  • 应交增值税如何计算,如何进行会计处理
  • 员工意外伤害保险可以抵扣进项税吗
  • 残疾人就业保障金申报时间
  • 资产负债表跟利润表勾稽关系公式
  • sql server怎么用sql语句创建数据库
  • SQL Server 2012 开窗函数
  • 个人所得税的征收模式为()A
  • 房租能不能一次性付清
  • 纳税申报是根据什么填写的
  • 公司代缴社保如何查询
  • 发货快递费多少钱
  • 个体工商户怎么变更法人
  • 咨询费如何缴税
  • 什么叫零售差额退税
  • 食品加工企业成本核算方法和流程
  • 会计记账凭证怎么装订视频
  • cf游戏初始化失败是因为什么
  • windows无法启动wlanautoconfig服务
  • linux系统中的一切都归结为
  • centos云服务器
  • 2019谷歌浏览器
  • neoCapture.exe - neoCapture是什么进程 有什么用
  • win8语音助手怎么关闭
  • debian linux教程
  • jquery关闭当前页面
  • css并集
  • easyui选项卡
  • Protecting Content With AssetBundle[Unity]
  • android开发最全教程
  • android应用市场有哪些
  • python内置方法大全
  • 河南省地税网上营业厅
  • 严守纪律守规矩
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设