08 2023 档案
摘要:`pinia-plugin-persistedstate` 丰富的功能可以使 Pinia Store 的持久化更易配置: - 与 [`vuex-persistedstate`](https://github.com/robinvdvleuten/vuex-persistedstate) 相似的 AP
阅读全文
摘要:`store` 是一个用 `reactive` 包装的对象,这意味着不需要在 getters 后面写 `.value`,就像 `setup` 中的 `props` 一样,**如果你写了,我们也不能解构它**: ```Vue ``` 为了从 store 中提取属性时保持其响应性,你需要使用 `stor
阅读全文
摘要:使用pinia的action异步获取频道分类列表数据并渲染到页面中。 接口: GET请求,[http://geek.itheima.net/v1_0/channels](http://geek.itheima.net/v1_0/channels) store/channel.js ```Vue im
阅读全文
摘要:- 在项目根目录创建store文件夹(此步骤和vuex相同) - 在步骤一的store文件夹下根据不同的用途场景创建单独的store文件(等同于vuex中分模块)、  并将其传递给应用: 编辑main.js: ```Vue import { createApp } f
阅读全文
摘要:一款官方推荐的,代替vuex的,新的状态管理工具。 官方网: [https://pinia.vuejs.org/zh/introduction.html](https://pinia.vuejs.org/zh/introduction.html) **主要区别:** - 去除了modules的概念,
阅读全文
摘要:子父之间使用v-model双向绑定数据,子组件每次都要写emit和props觉得麻烦? vue3.3新的实验性特性defineModel可以完全不写emit和props。 由于是实验性特性,所以需要配置之后才能使用。 修改vite.config.js: ```JavaScript export de
阅读全文
摘要:父组件: ```Vue 我是父组件, {{ count }} --> --> --> --> ``` 封装一个InputBox子组件,用于数据的加减 ```Vue - + ``` # 思考: 觉得每次在子组件中定义emit和props很麻烦?vue3.3添加了一个实验性特新defineModel,详
阅读全文
摘要:当我们使用选项式api时候,可以轻松创建与setup()选项同级别的选项。 但是,用了 {{ data }} ``` 这样就会有两个script标签,感觉怪怪的。 在Vue3.3版本中加入了defineOptions宏,就是用来解决这个问题的,现在你可以直接在setup中使用defineOption
阅读全文
摘要:vue2的provide和inject:[https://v2.cn.vuejs.org/v2/api/#provide-inject](https://v2.cn.vuejs.org/v2/api/#provide-inject) **主要作用:** 跨层级传递数据(响应和非相应数据都可以)、方法
阅读全文
摘要:和vue2一样,我们有时候希望父组件能够调用子组件中的方法、属性。那么就要用到ref。  Vue2:[https://v2.cn
阅读全文
摘要:和vue2对比,也是语法上稍有不同。 监听单个数据对象 ```Vue import {ref, watch} from "vue"; const count = ref(100) // 语法: watch(响应式数据对象, (newVal, oldVal) => { 业务处理... } // 只监听
阅读全文
摘要:计算属性在vue3中和vue2的思想概念都是一样,唯一区别就是在使用组合式api时候的语法稍有不同。 **使用步骤:** - 导入computed函数 - `import {computed} from 'vue'` - 使用computed函数 ```Vue arr: {{ arr }} arrD
阅读全文
摘要:**在setup中如果是直接定义遍历数据并不是响应式数据,和vue2中的data选项提供的数据不一样,vue2的data中返回的数据全部都是响应式数据。** ```Vue hello vue3 state: {{ state }} state: {{ getState() }} 修改state的值为
阅读全文
摘要:setup是在beforeCreate之前执行的,也就是vue实例还未被创建,因为setup中并没有this指针 ```Vue ```  }} ``` # 方式二:通过给script添加setup属性(语法糖) ```Vue hello vue3 st
阅读全文
摘要:这里对比的是vue-cli和create-vue创建vue3项目的文件中的内容差异。 ![](https://secure2.wostatic.cn/static/8hGnxvnWx3k5xGtUz91PHw/image.png?auth_key=1691824410-cuQuMDJs76r5vvu
阅读全文
摘要:create-vue是vue3新的脚手架搭建项目工具,底层构建工具使用**vite**,而不是vue-cli的webpack。 但不是说你不能用以前的`vue create`命令来创建vue3项目,你完全可以用vue-cli来创建。 vite:[https://cn.vitejs.dev/guide
阅读全文