首页 > 其他分享 >Vue3 新特性、Pinia

Vue3 新特性、Pinia

时间:2024-10-25 17:47:32浏览次数:3  
标签:defineOptions channelList 特性 语法 value Pinia Vue3 action

一、新特性 -  defineOptions

背景说明

因为我们用了<script setup>语法,没办法给setup去提供一些平级的属性,官方就提供了一个叫做 defineOptions 的语法

          

所以在 Vue3.3 中引入了 defineOptions 宏,用来定义 Options API 的选项。可以用 defineOptions 定义任意的选项,props、emits、expose、slots 除外(因为有defineProps、defineEmits)

二、新特性 -  defineModel

三、 Pinia 快速入门

pinia 是 Vue 最新的状态管理工具,是 vuex 的替代品

基本语法

         

定义 Store

state

getter 和 action

 

action 异步写法

下包                                                           搭架子

   

直接将获取到的频道列表赋值给 channelList.value ,而不是使用 this.channelList.value ,在 defineStore 中一般不使用 this 来访问内部的属性和方法。

四、 Pinia - storeToRefs 方法

五、 Pinia -  持久化

安装

在 main.js 中配置

在第三个参数的位置 

如果我们想改 key

总结

标签:defineOptions,channelList,特性,语法,value,Pinia,Vue3,action
From: https://blog.csdn.net/weixin_53676387/article/details/143088246

相关文章

  • Gradle 7.0都有哪些新特性
    Gradle7.0引入了许多新特性和改进,主要包括:1、支持Java16;2、性能改进;3、依赖管理改进;4、类型安全的项目访问器;5、移除已废弃的特性和API。特别的,依赖管理改进是本次更新的一个重点,通过减少模糊性,使得构建更加可预测和可维护。Gradle7.0正式支持Java16作为构建和运行的环境,使开......
  • PostgreSQL技术大讲堂 - 第69讲:PG17版本新特性--块级别增量备份
     PostgreSQL技术大讲堂-第69讲,主题:postgresql17新特性-块级别增量备份讲课内容:  1、wal_summarization块跟踪介绍  2、backup_mainfest文件介绍  3、做一个全量备份  4、做一个增量备份  5、合并备份 Oracle从10g开始就支持块跟踪特性,为增......
  • 基于 Koa + Vue3!一个开源的 Linux 服务器 Web SSH 面板工具!
    大家好,我是Java陈序员。今天,给大家介绍一个Linux服务器WebSSH连接面板工具,基于Koa+Vue3实现!关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。项目介绍EasyNode——一个客户端基于Vue3、服务端基于Koa实现的Linux......
  • [Flink] Flink 版本特性的演进
    Flink1.15新特性ApacheFlink1.15版本带来了一系列新特性和改进,以下是一些主要的更新:这些是Flink1.15版本的一些主要新特性和改进,旨在提升用户体验、性能和云原生环境下的互操作性。流批一体的进一步完善Flink1.15版本中流批一体更加完善,支持部分作业完成后的Che......
  • vue3开启eslint报错:ESLint error: Parsing error: ‘>‘ expected,vue文件tsx语法报错解
    出错代码部分<scriptlang="tsx">import{defineComponent}from'vue';importMyComponentfrom'./components/childAbc';constApp=defineComponent({name:'App',setup(){return()=>(<div&......
  • 2024-10-24 瀑布流(vue3)
    效果图: 代码: <template><divid="waterfallContainer"class="waterfall-container"><divv-for="(column,columnIndex)incolumns":key="columnIndex"class="waterfall-column">......
  • vue3入门教程,一站学会全套vue!
    vue3vue3作为前端重要的框架,学会vue可以让你更加了解前端。本博客致力于让你一站学会vue3的全部内容,从小白到高手。全是干货,准备好了吗?文章目录vue3创建工程文档结构核心语法模板语法插值语法指令语法无参指令有参指令自定义指令setupsetup函数setup语法糖响应式数......
  • vue3 学习笔记(不断更新中...)
    组合式APIsetup()11响应式APIrefref用于创建响应式数据(通常用来定义基本类型数据)在JavaScript代码中,需要使用.value来操作数据letcount=ref(1)console.log(count.value)//1count.value++console.log(count.value)//2在Template模板中不需要<scriptse......
  • (系列九)使用Vue3+Element Plus创建前端框架(附源码)
    说明  该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发)。   该系统文章,我会尽量说的非常详细,做到不管新手、老手都能看懂。   说明:OverallAuth2.0是一个简单、易懂、功能强大的权限+可视化流程管理系统。友情提醒:本篇文章是属于系......
  • [模板引擎/文本渲染引擎] Jinjia2重要特性的使用指南
    1使用指南CASE为变量设置默认值privatefinalstaticJinjavaJINJAVA=newJinjava();/**为变量设置默认值|共计3种方法**/@TestpublicvoiddefaultValueTest(){//{{variable|default(default_value)}}//my_dict是一个字......