08 2023 档案

摘要:`pinia-plugin-persistedstate` 丰富的功能可以使 Pinia Store 的持久化更易配置: - 与 [`vuex-persistedstate`](https://github.com/robinvdvleuten/vuex-persistedstate) 相似的 AP 阅读全文
posted @ 2023-08-13 14:27 蕝戀 阅读(2920) 评论(0) 推荐(0) 编辑
摘要:`store` 是一个用 `reactive` 包装的对象,这意味着不需要在 getters 后面写 `.value`,就像 `setup` 中的 `props` 一样,**如果你写了,我们也不能解构它**: ```Vue ``` 为了从 store 中提取属性时保持其响应性,你需要使用 `stor 阅读全文
posted @ 2023-08-13 14:26 蕝戀 阅读(3686) 评论(0) 推荐(1) 编辑
摘要:使用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 蕝戀 阅读(155) 评论(0) 推荐(0) 编辑
摘要:- 在项目根目录创建store文件夹(此步骤和vuex相同) - 在步骤一的store文件夹下根据不同的用途场景创建单独的store文件(等同于vuex中分模块)、 ![](https://secure2.wostatic.cn/static/7tsMdHuR2i5hy79jHGjHZC/image 阅读全文
posted @ 2023-08-13 14:25 蕝戀 阅读(385) 评论(0) 推荐(0) 编辑
摘要:用你喜欢的js包管理器安装pinia: ```Bash yarn add pinia # 或者使用 npm npm install pinia ``` 创建一个 pinia 实例 (根 store) 并将其传递给应用: 编辑main.js: ```Vue import { createApp } f 阅读全文
posted @ 2023-08-13 14:25 蕝戀 阅读(56) 评论(0) 推荐(0) 编辑
摘要:一款官方推荐的,代替vuex的,新的状态管理工具。 官方网: [https://pinia.vuejs.org/zh/introduction.html](https://pinia.vuejs.org/zh/introduction.html) **主要区别:** - 去除了modules的概念, 阅读全文
posted @ 2023-08-13 14:24 蕝戀 阅读(13) 评论(0) 推荐(0) 编辑
摘要:子父之间使用v-model双向绑定数据,子组件每次都要写emit和props觉得麻烦? vue3.3新的实验性特性defineModel可以完全不写emit和props。 由于是实验性特性,所以需要配置之后才能使用。 修改vite.config.js: ```JavaScript export de 阅读全文
posted @ 2023-08-12 15:18 蕝戀 阅读(3549) 评论(0) 推荐(0) 编辑
摘要:父组件: ```Vue 我是父组件, {{ count }} --> --> --> --> ``` 封装一个InputBox子组件,用于数据的加减 ```Vue - + ``` # 思考: 觉得每次在子组件中定义emit和props很麻烦?vue3.3添加了一个实验性特新defineModel,详 阅读全文
posted @ 2023-08-12 15:18 蕝戀 阅读(352) 评论(0) 推荐(0) 编辑
摘要:当我们使用选项式api时候,可以轻松创建与setup()选项同级别的选项。 但是,用了 {{ data }} ``` 这样就会有两个script标签,感觉怪怪的。 在Vue3.3版本中加入了defineOptions宏,就是用来解决这个问题的,现在你可以直接在setup中使用defineOption 阅读全文
posted @ 2023-08-12 15:18 蕝戀 阅读(405) 评论(0) 推荐(0) 编辑
摘要: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 蕝戀 阅读(59) 评论(0) 推荐(0) 编辑
摘要:和vue2一样,我们有时候希望父组件能够调用子组件中的方法、属性。那么就要用到ref。 ![](https://secure2.wostatic.cn/static/9EaR4qMsjTzZQ1pUTKfZDH/image.png?auth_key=1691824633-uYpoam2KQH219s 阅读全文
posted @ 2023-08-12 15:17 蕝戀 阅读(12) 评论(0) 推荐(0) 编辑
摘要:整体来说和vue2也是比较相似的。 # 使用props传递数据到子组件 - 父组件给定数据。 - 子组件中使用defineProps来接收父组件传递的数据。 ![](https://secure2.wostatic.cn/static/qrARQNrexu57w8Sckba1by/image.png 阅读全文
posted @ 2023-08-12 15:16 蕝戀 阅读(109) 评论(0) 推荐(0) 编辑
摘要:# 生命周期钩子函数 Vue3:[https://cn.vuejs.org/api/composition-api-lifecycle.html](https://cn.vuejs.org/api/composition-api-lifecycle.html) Vue2:[https://v2.cn 阅读全文
posted @ 2023-08-12 15:16 蕝戀 阅读(107) 评论(0) 推荐(0) 编辑
摘要:和vue2对比,也是语法上稍有不同。 监听单个数据对象 ```Vue import {ref, watch} from "vue"; const count = ref(100) // 语法: watch(响应式数据对象, (newVal, oldVal) => { 业务处理... } // 只监听 阅读全文
posted @ 2023-08-12 15:15 蕝戀 阅读(44) 评论(0) 推荐(0) 编辑
摘要:计算属性在vue3中和vue2的思想概念都是一样,唯一区别就是在使用组合式api时候的语法稍有不同。 **使用步骤:** - 导入computed函数 - `import {computed} from 'vue'` - 使用computed函数 ```Vue arr: {{ arr }} arrD 阅读全文
posted @ 2023-08-12 15:15 蕝戀 阅读(95) 评论(0) 推荐(0) 编辑
摘要:**在setup中如果是直接定义遍历数据并不是响应式数据,和vue2中的data选项提供的数据不一样,vue2的data中返回的数据全部都是响应式数据。** ```Vue hello vue3 state: {{ state }} state: {{ getState() }} 修改state的值为 阅读全文
posted @ 2023-08-12 15:14 蕝戀 阅读(23) 评论(0) 推荐(0) 编辑
摘要:setup是在beforeCreate之前执行的,也就是vue实例还未被创建,因为setup中并没有this指针 ```Vue ``` ![](https://secure2.wostatic.cn/static/bkE48hFefXKnLYXqkA9vte/image.png?auth_key=1 阅读全文
posted @ 2023-08-12 15:14 蕝戀 阅读(61) 评论(0) 推荐(0) 编辑
摘要:# 方式一:通过setup选项 ```Vue ``` **例子:** ```Vue hello vue3 state: {{ state }} state: {{ getState() }} ``` # 方式二:通过给script添加setup属性(语法糖) ```Vue hello vue3 st 阅读全文
posted @ 2023-08-12 15:14 蕝戀 阅读(43) 评论(0) 推荐(0) 编辑
摘要:这里对比的是vue-cli和create-vue创建vue3项目的文件中的内容差异。 ![](https://secure2.wostatic.cn/static/8hGnxvnWx3k5xGtUz91PHw/image.png?auth_key=1691824410-cuQuMDJs76r5vvu 阅读全文
posted @ 2023-08-12 15:13 蕝戀 阅读(19) 评论(0) 推荐(0) 编辑
摘要:create-vue是vue3新的脚手架搭建项目工具,底层构建工具使用**vite**,而不是vue-cli的webpack。 但不是说你不能用以前的`vue create`命令来创建vue3项目,你完全可以用vue-cli来创建。 vite:[https://cn.vitejs.dev/guide 阅读全文
posted @ 2023-08-12 15:11 蕝戀 阅读(210) 评论(0) 推荐(0) 编辑