vue3学习day04-provide和inject、defineOptions、defineModel、Pinia、pinia持久化

15、provide和inject

（1）作用：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

（2）语法：

        1）顶层组件通过provide函数提供数据

        2）底层函数提供inject获取数据

（3）示例1：

初始：

1）在父组件内

①导入provide

②提供传递的数据（provide（属性名，属性名对应的内容））

2）在孙组件内

①导入inject

②接收

3）渲染

4）效果：

（4）示例2（修改数据）

已知：

 

1）在父组件内提供修改方法

2）孙组件接收

3）孙组件使用

4）效果

16、 defineOptions

（1）作用：定义任意选项（props、emits、expose、slots除外），解决<script setup>占  满script标签，无法添加与setup平级的属性。

（2）语法：

已知在views文件夹下的login中有一index.vue文件

命名时出现两个script，无法新增name属性

解决（defineOptions（{}））：

17、defineModel

（1）作用：简化代码（vue3支持v-model，但是v-model相当于传递一个modelValue属性，并触发update-modelValue事件，代码繁冗）

（2）语法

已知（父组件绑定了一个数据）：

1）导入defineModel

2）声明

3）在vite.config.js中配置

4）使用

5）效果：

18、Pinia

（1）概念：vue的状态管理工具，vuex的替代品

（2）优点：

        1）提供更加简单的API（去掉了mutations）

（由state、mutations、actions、getters、modules——>state、actions、getters）

        2）提供符合组合式风格的API

        3）去掉了modules概念，每一个仓库（store）都是一个独立的模块

        4）对TypeScript更加友好，提供可靠的类型推断。

（3）语法

        1）创建一个空的vue3项目（npm create vue@latest）

执行以下命令，启动项目

        2）通过VsCode打开项目，清除不必要文件（components、assets）和数据（App.vue和main.js中）

        3）准备组件使组件呈现以下效果

4）配置pinia

        ①找到官方文档（https://cn.vuejs.org/），点击开始使用，找到“安装”，点击“开始”

        

        ②安装pinia（yarn add pinia或npm install pinia）

        ③在main.js中，导入、创建、挂载

        ④重启项目，不报错即可

        5）pinia使用

                ①创建仓库

        创建仓库——导入

        创建仓库——定义仓库

        

        创建仓库——提供数据

        

        创建仓库——返回

        

创建仓库——导出

        

②使用

③效果

（4）处理安装报错

1) 尝试调用 import_node_util.parseArgs 这个函数时出现了问题，因为 parseArgs 并不是一个有效的函数或者没有被正确地导出。问题原因（依赖问题、导入错误、构建问题）

我的这里是亿依赖问题，node版本不匹配（现在使用的是node的16.8.0）

解决步骤：

①查看node版本

②使用nvm查看现在有几个node版本

③切换版本

④再次查看node版本

（5）pinia的属性

        1）getters（通过computed实现）

                ①使用（在创建仓库的js文件中新提供一个借助computed实现的函数，通过变量接收）

                ②导入、接收、调用

                ③效果

        

2）actions异步

①自定义一个接口并启动接口，接口内容如下

②安装axios

③新建仓库，进行异步请求，提供数据

④使用

⑤效果

3）storeToRefs

①作用：解决解构仓库得到的数据由响应式变为非响应式的问题，即解构数据时需要加storeToRefs，解构方法不需要加storeToRefs

 

②语法示例：

已知：

使用：

效果：

19、pinia持久化

（1）安装pinia持久化插件

①打开官网（https://prazdevs.github.io/pinia-plugin-persistedstate/zh/），点击“开始使用”

②在vscode的package查看pinia版本，确定版本高于pinia^2.0.0

③安装依赖（npm i pinia-plugin-persistedstate）

④将插件安装到pinia实例上（在main.js）

⑤使用（创建 Store 时，将 persist 选项设置为 true）（在第三个参数的位置）

⑥效果（增加后，刷新，数值不变）（若未实现，可以试试重启）

在本地存储，可看到

（2）插件内部的修改

1）在本地存储的id名

（在需要修改id，避免id重复的地方使用persist修改）

2）paths（用于指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态，undefined 或 null 表示持久化整个 state）

在原js文件，新增一个msg，发现它也会持久化

指定num才可持久化：