蕝戀 - 博客园

2023年8月13日

摘要：使用pinia的action异步获取频道分类列表数据并渲染到页面中。接口： GET请求，[http://geek.itheima.net/v1_0/channels](http://geek.itheima.net/v1_0/channels) store/channel.js ```Vue im 阅读全文

posted @ 2023-08-13 14:26 蕝戀阅读(139) 评论(0) 推荐(0) 编辑

创建定义store并使用组合式api、选项式api

摘要： - 在项目根目录创建store文件夹（此步骤和vuex相同） - 在步骤一的store文件夹下根据不同的用途场景创建单独的store文件（等同于vuex中分模块）、 ![](https://secure2.wostatic.cn/static/7tsMdHuR2i5hy79jHGjHZC/image 阅读全文

posted @ 2023-08-13 14:25 蕝戀阅读(312) 评论(0) 推荐(0) 编辑

手动安装pinia、给项目添加pinia实例

摘要：用你喜欢的js包管理器安装pinia： ```Bash yarn add pinia # 或者使用 npm npm install pinia ``` 创建一个 pinia 实例 (根 store) 并将其传递给应用：编辑main.js： ```Vue import { createApp } f 阅读全文

posted @ 2023-08-13 14:25 蕝戀阅读(50) 评论(0) 推荐(0) 编辑

pinia状态管理初识

摘要：一款官方推荐的，代替vuex的，新的状态管理工具。官方网： [https://pinia.vuejs.org/zh/introduction.html](https://pinia.vuejs.org/zh/introduction.html) **主要区别：** - 去除了modules的概念，阅读全文

posted @ 2023-08-13 14:24 蕝戀阅读(11) 评论(0) 推荐(0) 编辑

2023年8月12日

vue3.3实验性新特性defineModel

摘要：子父之间使用v-model双向绑定数据，子组件每次都要写emit和props觉得麻烦？ vue3.3新的实验性特性defineModel可以完全不写emit和props。由于是实验性特性，所以需要配置之后才能使用。修改vite.config.js： ```JavaScript export de 阅读全文

posted @ 2023-08-12 15:18 蕝戀阅读(3524) 评论(0) 推荐(0) 编辑

vue3在父子组件使用v-model双向绑定

摘要：父组件： ```Vue 我是父组件, {{ count }} --> --> --> --> ``` 封装一个InputBox子组件，用于数据的加减 ```Vue - + ``` # 思考：觉得每次在子组件中定义emit和props很麻烦？vue3.3添加了一个实验性特新defineModel，详阅读全文

posted @ 2023-08-12 15:18 蕝戀阅读(341) 评论(0) 推荐(0) 编辑

vue3.3新特性defineOptions

摘要：当我们使用选项式api时候，可以轻松创建与setup()选项同级别的选项。但是，用了 {{ data }} ``` 这样就会有两个script标签，感觉怪怪的。在Vue3.3版本中加入了defineOptions宏，就是用来解决这个问题的，现在你可以直接在setup中使用defineOption 阅读全文

posted @ 2023-08-12 15:18 蕝戀阅读(381) 评论(0) 推荐(0) 编辑

组合式api-跨层级组件通信provide和inject

摘要： vue2的provide和inject：[https://v2.cn.vuejs.org/v2/api/#provide-inject](https://v2.cn.vuejs.org/v2/api/#provide-inject) **主要作用：** 跨层级传递数据（响应和非相应数据都可以）、方法阅读全文

posted @ 2023-08-12 15:17 蕝戀阅读(55) 评论(0) 推荐(0) 编辑

组合式api-ref引用子组件、dom元素， defineExpose的使用

摘要：和vue2一样，我们有时候希望父组件能够调用子组件中的方法、属性。那么就要用到ref。 ![](https://secure2.wostatic.cn/static/9EaR4qMsjTzZQ1pUTKfZDH/image.png?auth_key=1691824633-uYpoam2KQH219s 阅读全文

posted @ 2023-08-12 15:17 蕝戀阅读(11) 评论(0) 推荐(0) 编辑

组合式api-子父组件之间通信props和emit

摘要：整体来说和vue2也是比较相似的。 # 使用props传递数据到子组件 - 父组件给定数据。 - 子组件中使用defineProps来接收父组件传递的数据。 ![](https://secure2.wostatic.cn/static/qrARQNrexu57w8Sckba1by/image.png 阅读全文

posted @ 2023-08-12 15:16 蕝戀阅读(104) 评论(0) 推荐(0) 编辑

绝恋。。

公告