位置: IT常识 - 正文

vue下一代状态管理Pinia.js 保证你看的明明白白!(vue状态机)

编辑:rootadmin
1.pinia的简单介绍 Pinia最初是在2019年11月左右重新设计使用Composition API的 Vue 商店外观的实验。 从那时起,最初的原则相同,但 Pinia 适用于 Vue 2 和 Vue 3 。 并且不需要你使用组合 API。 除了安装和SSR之外,还有其他的 API是一样的。 ... 1.pinia的简单介绍Pinia最初是在2019年11月左右重新设计使用Composition API的 Vue 商店外观的实验。从那时起,最初的原则相同,但 Pinia 适用于 Vue 2 和 Vue 3 。并且不需要你使用组合 API。除了安装和SSR之外,还有其他的 API是一样的。并且这些针对 Vue 3 ,并在必要时提供 Vue 2 的相关注释。以便 Vue 2 和 Vue 3 的用户可以阅读!2.为什么要使用Pina?Pinia 是 Vue 的存储库,允许您跨组件/页面共享状态。如果您的组合 API,您可能会认为您可以使用简单的export const state = reactive({})这对于单页应用程序来说是正确的,但如果它是服务器端的外观,将您的应用程序显示给安全漏洞。但即使在小型单页应用程序中,您也可以从使用 Pinia 中获得好处:1.开发工具支持2.动作、追踪的跟踪3.热模块更换4.为 JS 用户提供适当功能的 TypeScript 支持或自动完成5.服务器端渲染支持安装npm install pinia --save3.创建文件夹和文件-存放数据在新建 src/store目录并在其下面创建 index.ts文件,并导出这个文件// src/store/index.ts下的代码import { createPinia } from 'pinia'const store = createPinia()export default store在 main.ts 中引入import { createApp } from 'vue'import App from './App.vue'import router from './router/index'<!-- 引入 -->import store from "./store/index"<!-- 使用store -->createApp(App).use(router).use(store).mount('#app')需求描述假设我们现在有好几个模块。有user模块。admin模块。我们想对这模块中的数据进行管理。为了管理方便,后面易于维护。我们决定将这些模块进行拆分。于是我们在store下创建 user.ts 文件,管理这个user模块的数据。user.ts下的数据//src/store/user.ts 文件import { defineStore } from 'pinia'export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { name: '于途', likelist:[], sex:'男', work:'写代码', heigt:'1.70cm' } },})defineStore的介绍defineStore 接收两个参数.第一个参数:必须是唯一的,多个模块千万千万不能重名。因为Pinia 会把所有的模块都挂载到根容器上第二个参数是一个对象,里面的选项state和 Vuex 差不多4.获取store中值的第一种方法<template> <div class="pinia"> <h2> 学习pinia </h2> <div> {{ userStore }} </div> <div>姓名:{{ userStore.name }}</div> <div>性别:{{ userStore.sex }}</div> <div>工作:{{ userStore.work }}</div> <div>身高:{{ userStore.heigt }}</div> </div></template><script setup lang='ts'>// 引入store中暴露出去的方法import { useUserStore } from '../../store/user'const userStore = useUserStore()</script>

推荐整理分享vue下一代状态管理Pinia.js 保证你看的明明白白!(vue状态机),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue中的状态管理,vue状态管理相关的面试题,vue状态码,vue状态管理相关的面试题,vue的状态改变方式,vue中的状态管理,vue中的状态管理,vue3状态管理,内容如对您有帮助,希望把文章链接给更多的朋友!

获取store中值的第二种方法-computed<template> <div class="pinia"> <h2> 学习pinia </h2> <div>姓名:{{useStoreName}}</div> <div>性别:{{useStoreSex}}</div> </div></template><script setup lang='ts'>// 引入store中暴露出去的方法import { computed } from 'vue'import { useUserStore } from '../../store/user'const userStore = useUserStore()// 使用 computed取获取值const useStoreName = computed(() => userStore.name)const useStoreSex = computed(() => userStore.sex)</script>

提出问题如果对象上有多个属性,可以进行结构吗?可以的!使用 pinia 提供的 storeToRefs我们来看下怎去使用5.pinia 提供的 storeToRefs进行结构<template> <div class="pinia"> <h2> 学习pinia </h2> <div>姓名:{{ asName }}</div> <div>性别:{{ mysex }}</div> <div>工作:{{ work }}</div> <div>身高:{{ heigt }}</div> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'import { useUserStore } from '../../store/user'const userStore = useUserStore()// asName 和 mysex 是我取的别名const { name : asName ,sex:mysex, work, heigt } = storeToRefs(userStore)</script>vue下一代状态管理Pinia.js 保证你看的明明白白!(vue状态机)

6.如何修改 state 中的数据修改 state 中的数据,可以通过 actions 下的方法。然后调用 updataName 就可以取修改 state中的name值了//src/store/user.ts 文件import { defineStore } from 'pinia'export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { name: '于途', likelist:[], sex:'男', work:'写代码', heigt:'1.70cm' } }, // actions 可以修改state中的值,这里面提供方法 actions:{ // 修改name中的数据 updataName(name:string){ this.name=name }, },})调用方法,修改state中的name<template> <div class="pinia"> <h2> 学习pinia </h2> <div>姓名:{{ asName }}</div> <div>性别:{{ mysex }}</div> <div>工作:{{ work }}</div> <div>身高:{{ heigt }}</div> <el-button type="primary" @click="changeHander">修改name</el-button> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'import { useUserStore } from '../../store/user'const userStore = useUserStore()// asName 和 mysex 是我取的别名const { name : asName ,sex:mysex, work, heigt } = storeToRefs(userStore)const changeHander=()=>{ userStore.updataName('小玉兔') // 这样我发现也可以,但是不推荐这样使用。 // 统一通过 actions 中的方法去修改值 userStore.work='我换工作了'}</script>

7.getters的使用//src/store/user.ts 文件import { defineStore } from 'pinia'export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { name: '于途', likelist:[], sex:'男', work:'写代码', heigt:'1.70cm', age:26, } }, // actions 可以修改state中的值,这里面提供方法 actions:{ // 修改name中的数据 updataName(name:string){ this.name=name }, }, // Getter 完全等同于 Store 状态的计算值 getters:{ // 将姓名进行更改 getName: (state) => { return state.name + 'hahha~!' } }})//使用的页面.vue<template> <div class="pinia"> <h2> 学习pinia </h2> <div>姓名:{{ asName }}</div> <div>性别:{{ mysex }}</div> <div>工作:{{ work }}</div> <div>身高:{{ heigt }}</div> <div>身高:{{ age }}</div> <!-- 这里就直接使用了getters中的方法 --> 姓名:{{ userStore.getName }} <el-button type="primary" @click="changeHander">修改name</el-button> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'import { useUserStore } from '../../store/user'const userStore = useUserStore()// asName 和 mysex 是我取的别名const { name : asName ,sex:mysex, work, heigt,age } = storeToRefs(userStore)const changeHander=()=>{ userStore.updataName('小玉兔')}</script>

对于getters的使用的说明Getter 完全等同于 Store 状态的计算值 computed.并不会影响原始数据9.异步actions-设置state中的值//src/store/user.ts 文件import { defineStore } from 'pinia'// 引入接口import { getUser } from "../https/api";export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { name: '于途', likelist:[], } }, // actions 可以修改state中的值,这里面提供方法 actions:{ // 修改name中的数据 同步 updataName(name:string){ this.name=name }, // 异步-获取远端的数据 loadUserList(){ getUser({}).then(res=>{ this.likelist = res }) } // 使用await和async 第二种方法 // async loadUserList(){ // const list = await getUser({}) // console.log('list',list) // this.likelist = list // } },})使用的页面<template> <div class="pinia"> <h2> 学习pinia </h2> 数据 {{ userStore.likelist}} <el-button type="primary" @click="changeHander">获取远端数据</el-button> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'import { useUserStore } from '../../store/user'const userStore = useUserStore()const changeHander=()=>{ // 异步调用 userStore.loadUserList() // 加载所有数据}

10.actions 中互相调用方法很多时候,我们可能会出现 actions中互相去调用方法。这个时候怎么去处理呢? 通过this.方法名(参数)//src/store/user.ts 文件import { defineStore } from 'pinia'// 引入接口import { getUser } from "../https/api";export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { name: '于途', likelist:[], } }, // actions 可以修改state中的值,这里面提供方法 actions:{ // 修改name中的数据 同步 updataName(name:string){ this.name=name }, // 异步-获取远端的数据 loadUserList(){ getUser({}).then(res=>{ this.likelist = res this.sayHi('互相调用方法') }) }, sayHi(mess:string){ console.log('loadUserList方法中调用了sayHi',mess) } },})使用的页面.vue<template> <div class="pinia"> <h2> 学习pinia </h2> 数据 {{ userStore.likelist}} <el-button type="primary" @click="changeHander">获取远端数据</el-button> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'import { useUserStore } from '../../store/user'const userStore = useUserStore()const changeHander=()=>{ // 异步调用 userStore.loadUserList() // 加载所有数据}</script>

11.数据持久化-sessionStorage 或 localStorage我们都知道,vuex刷新后,数据会丢失。这个时候我们需要将数据进行持久化。我们可以考虑sessionStorage或者localStorage//src/store/user.ts 文件import { defineStore } from 'pinia'// 引入接口import { getUser } from "../https/api";export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { // 数据持久化使用的是sessionStorage name: sessionStorage.getItem('name') ? sessionStorage.getItem('name') : '于途', likelist:[], } }, actions:{ // 修改name中的数据 同步 updataName(name:string){ sessionStorage.setItem('name', name) this.name=name }, },})<template> <div class="pinia"> <h2> 学习pinia </h2> 姓名 {{ userStore.name}} <el-button type="primary" @click="changeHander">该变值</el-button> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'import { useUserStore } from '../../store/user'const userStore = useUserStore()const changeHander=()=>{ // 异步调用 userStore.updataName('我改变了姓名') }</script>

12.跨模块修改数据虽然我不建议跨模块修改数据。因为这样可能会导致你的应用数据流向变得难以理解。但是有些时候确实需要跨模块修改数据。那么pinia怎么去处理跨模块修数据呢?下面我们一起来探索跨模块修改数据!假设admin模块需要去修改user模块中的数据admin.ts代码如下//src/store/admin.ts 文件import { defineStore } from 'pinia'// 引入user模块import { useUserStore } from './user'export const adminUserStore = defineStore({ id: 'adminkey', actions:{ // 通过引入的useUserStore模块,然后去触发它里面对应的方法。 editUserModuleValue(name:string){ // userStore可以看见整个user模块中的数据和方法 let userStore=useUserStore() console.log('userStore',userStore) userStore.updataName(name) } },})user.ts代码//src/store/user.ts 文件import { defineStore } from 'pinia'// 引入接口export const useUserStore = defineStore({ id: 'userkey', // id必填,且需要唯一 // state是存放数据的 state: () => { return { name: '于途', likelist:[], sex:'男', work:'写代码', heigt:'1.70cm' } }, actions:{ // 修改name中的数据 同步 updataName(name:string){ this.name=name }, },})页面的使用<template> <div class="pinia"> <h2> 学习pinia </h2> 姓名 {{ userStore.name}} <el-button type="primary" @click="changeHander">该变值</el-button> </div></template><script setup lang='ts'>import { storeToRefs } from 'pinia'// 引入admin模块import { adminUserStore } from '../../store/admin'// 引入user模块import { useUserStore } from '../../store/user'const adminStore = adminUserStore()const userStore = useUserStore()// dmin模块需要去修改user模块中的数据const changeHander=()=>{ adminStore.editUserModuleValue('数据数据')}</script>

尾声如果你觉得我写的不错的话,可以给我推荐、打赏、评论!上一个给我打赏的小伙伴都已经找到女朋友了!咦!你不信,不信你给我打赏看一下!保准你追到到喜欢的Ta!你不会追,哎!难受。我教你,你可以这样说:小生不才,斗胆-问,不知姑娘是否心系他人。感情之事,在下不敢儿戏!如若姑娘早已心系他人。那在下便不再打扰。如若有所唐突还望姑娘多加体谅!若姑娘非我良人,那在下就不庸人自恼。在下怕越陷越深,还望姑娘尽早告知!话已至此,我便先在此谢过!拿去不谢!回头告诉我结果啊!咦!抓住一个没有打赏的小伙伴!
本文链接地址:https://www.jiuchutong.com/zhishi/304530.html 转载请保留说明!

上一篇:PHPCMS各种注入漏洞补丁(php 注入)

下一篇:vue大型电商项目尚品汇(前台篇)day02(vue大型项目架构设计)

  • Word将文字怎么设置为18磅(word文字怎么把字竖起来)

    Word将文字怎么设置为18磅(word文字怎么把字竖起来)

  • qq号绑定的手机号被注销了怎么办(qq号绑定的手机号注销了怎么换绑)

    qq号绑定的手机号被注销了怎么办(qq号绑定的手机号注销了怎么换绑)

  • ios13.4.1录屏在哪(ios13.5录屏在哪)

    ios13.4.1录屏在哪(ios13.5录屏在哪)

  • 离基站多少米安全(离基站多远信号最好)

    离基站多少米安全(离基站多远信号最好)

  • 钉钉网课学生需要露脸吗(钉钉网课学生要开摄像头吗)

    钉钉网课学生需要露脸吗(钉钉网课学生要开摄像头吗)

  • win 10关闭自动更新,还是会自动更新(Win10关闭自动更新方法永久)

    win 10关闭自动更新,还是会自动更新(Win10关闭自动更新方法永久)

  • 旺旺号在淘宝哪里查询(旺旺号在那)

    旺旺号在淘宝哪里查询(旺旺号在那)

  • 笔记本突然断电后开不了机(笔记本突然断电关机开不了机)

    笔记本突然断电后开不了机(笔记本突然断电关机开不了机)

  • 苹果电池81%要不要换(苹果电池 81%)

    苹果电池81%要不要换(苹果电池 81%)

  • 手机顶端有个电话上有HD是什么(手机顶端有个电话标志)

    手机顶端有个电话上有HD是什么(手机顶端有个电话标志)

  • qq号怎么申诉回来(qq怎么申诉回执编号)

    qq号怎么申诉回来(qq怎么申诉回执编号)

  • mbr和guid哪个速度快(mbr快还是guid快)

    mbr和guid哪个速度快(mbr快还是guid快)

  • 苹果几代可以无线充电(苹果几代无线耳机的区别)

    苹果几代可以无线充电(苹果几代无线耳机的区别)

  • vue慢动作怎么拍(vue视频特效怎么弄的)

    vue慢动作怎么拍(vue视频特效怎么弄的)

  • 小米2a支持移动4g吗(小米移动支持2g网络)

    小米2a支持移动4g吗(小米移动支持2g网络)

  • 怎么将pr视频导出(怎么将pr视频导出到桌面)

    怎么将pr视频导出(怎么将pr视频导出到桌面)

  • 文本框字体怎么居中(文本框字体怎么上下居中)

    文本框字体怎么居中(文本框字体怎么上下居中)

  • vivo充电图标在哪调(vivos6充电图标)

    vivo充电图标在哪调(vivos6充电图标)

  • 华为手环b3能测血压吗(华为手环b3能测心率吗)

    华为手环b3能测血压吗(华为手环b3能测心率吗)

  • 已好评了怎样申请退款(已好评了怎样申诉)

    已好评了怎样申请退款(已好评了怎样申诉)

  • 电脑分数怎么打出来(电脑如何打出分数)

    电脑分数怎么打出来(电脑如何打出分数)

  • m1005mfp恢复出厂设置(m1005 恢复出厂)

    m1005mfp恢复出厂设置(m1005 恢复出厂)

  • 重装系统后出现一堆字母(重装系统后出现ctrl+alt+del)

    重装系统后出现一堆字母(重装系统后出现ctrl+alt+del)

  • YOLOV7改进-添加EIoU,SIoU,AlphaIoU,FocalEIoU,Wise-IoU(yolov5增加检测层)

    YOLOV7改进-添加EIoU,SIoU,AlphaIoU,FocalEIoU,Wise-IoU(yolov5增加检测层)

  • phpcms v9文章点击数是哪个表哪个字段(phpcms文档)

    phpcms v9文章点击数是哪个表哪个字段(phpcms文档)

  • 驾驶培训 增值税
  • 个人免征税额
  • 运输合同印花税税率
  • 租赁合同印花税双方都要交吗
  • 债权债务互抵怎么做账
  • 公司购买股票如何做账
  • 小规模纳税人专票免税吗?
  • 社保缴费是当月扣当月的吗
  • 免税是不是不用交税
  • 包装版费怎么计入生产成本
  • 发票专用章换了需要登记吗
  • 职工发放福利的会计处理
  • 员工住院的发票可以做账吗
  • 建筑企业城建税及教育附加税率
  • 自营方式建造固定资产增值税
  • 企业筹建期间需要招几个会计
  • 一般纳税人可以不交增值税吗
  • 金税盘问题
  • 成立一般纳税人公司有什么好处
  • 退税差额怎么做账
  • 子公司和母公司可以一起投标吗
  • 无法取得发票的预付账款如何处理
  • 微信语音音乐怎么调
  • 一般纳税人减免性质代码怎么填写
  • c盘appdata怎么清理
  • 如何彻底关闭电脑右下角弹窗
  • 污水处理费该谁交
  • PHP:oci_set_prefetch()的用法_Oracle函数
  • 合同结算账务处理分录
  • 如何升级win10系统版本
  • PHP:stream_get_contents()的用法_Stream函数
  • 微软输入法卸载不了
  • 社保通过银行缴纳
  • 现金折扣的账务处理最新规定
  • php根据经纬度计算距离
  • symfony框架经验总结
  • 购买财务软件报什么科目
  • echart横坐标
  • 退税发票在总局怎么开
  • uni vuex
  • openai.error.AuthenticationError: No API key provided.
  • openprop教程
  • 固定资产清理属于非流动资产吗
  • 小微企业短小频急
  • 企业所得税的成本怎么填?
  • PostgreSQL管理工具phpPgAdmin入门指南
  • 重复报销怎么写情况说明
  • 发票定额 超过怎么办
  • 一般纳税人销售旧货税率
  • 企业每个季度叫什么
  • 固定资产改造更新后年限怎么算
  • 小规模纳税人涉嫌虚开发票
  • 租赁收入相关的会计准则
  • 企业接收到政府信息
  • 产品质量问题有赔偿吗
  • 出纳提取现金有金额限制吗
  • 小规模纳税人财务报表季报怎么填
  • 员工的报销
  • 租金是含税价还是含税金
  • 利息支出和利息收入区别
  • mysql的join有几种
  • sql效率调优
  • 应用商店升级版
  • 六款常见的墨水
  • linux oracle12c
  • 苹果mac怎样
  • win10改服务器
  • w10简易版
  • cocos2dx4.0教程
  • opengl es3.0
  • opengl和openglskia
  • jquery.css
  • (转)Unity3D NGUI在UI上显示3D模型
  • js中排序的函数
  • JavaScript中的复杂数据类型又称为
  • 国家税务局通用机打发票属于增值税发票吗
  • 国家税务局大厅上班时间
  • 2022年国家标准公文格式
  • 郑州市国家税务局地址在哪里
  • 增值税纳税申报表附列资料(三)
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设