Vue——Pinia数据持久化（四）

迈不过友情╰ 2024-02-25 04:32 99阅读 0赞

#### 这里写目录标题 ####

*  一、pinia：数据存储仓库
 *   *  1、解决的问题
     *  2、vuex和pinia的作用
     *  3、pinia和sessionStorage、localStorage区别
     *  4、安装
     *  5、main.js中注册Pinia
     *  6、使用
     *   *  a、在store中创建user.js文件，导入
     *  7、组件中使用全局属性
     *  8、组件中使用全局方法
     *  9、当选择项目进入，展示该项目的信息
     *  10、修改Pinia中提供的数据
 *  二、获取项目的详细信息
 *   *  1、先将项目的信息导入进来
     *  2、定义接口：获取项目的详细信息
     *  3、发送请求
     *  4、页面上获取到了项目信息
     *  5、解决数据持久化问题

## 一、pinia：数据存储仓库 ##

### 1、解决的问题 ###

解决：在项目首页中如何获取项目的基本信息（选择的那个项目）  
![在这里插入图片描述][c055fd31d30b42f29f5a578a9635ff51.png]

### 2、vuex和pinia的作用 ###

Pinia是Vue 的存储库，它允许您跨组件/页面共享数据。

### 3、pinia和sessionStorage、localStorage区别 ###

> **浏览器自带的数据存储方式和pinia  
> 1、window.sessionStorage:会话级别的存储，窗口关闭会自动清除，只能存储字符串和数值  
> 2、window.localStorage：持久化存储，除非主动清除，否则会永久保存到浏览器本地，只能存储字符串和数值  
> 3、Pinia：数据存储在缓存（内存）中，优点读写更快，可以保存任意的js类型数据和对象**

### 4、安装 ###

![在这里插入图片描述][220a3114db66410380c253611ea560ab.png]

### 5、main.js中注册Pinia ###

![在这里插入图片描述][dcc69eed2b2e4d2e9cf511c93e4aed9f.png]

### 6、使用 ###

#### a、在store中创建user.js文件，导入 ####

import \{ defineStore \} from ‘pinia’

> 1、定义一个store对象(定义一个存储数据的仓库)  
> userStore：第二个userStore是仓库名称  
> userStore：第一个userStore是变量  
> export const userStore = defineStore(‘userStore’,\{

> 2、定义仓库中全局共享（跨模块、跨页面）的数据  
> ![在这里插入图片描述][68dd3c17ddc040e6a36d62e7a93d7cc3.png]

state(){
        
            return{
        
                name:"kobe",
                age:20,
                // 保存全局的项目信息
                pro:{
        }
            }
        },

> 3、全局的计算属性：getters  
> ![在这里插入图片描述][c41d9c1dd702468983b668b3a25d00b2.png]

getters:{
        
            desc(state){
        
                return "我的名字:"+state.name+',年龄'+state.age
            }
        },

> 4、定义全局的方法：actions  
> 当多个组件中使用同一个方法，可以将该方法定义为pinia的全局方法，提高代码的重用性。  
> ![在这里插入图片描述][099d8e0c5b5c4849ab3912abebc67706.png]

actions:{
        
            // 退出登录
            logout(){
        
                window.sessionStorage.removeItem('token')
                window.sessionStorage.removeItem('uname')
                router.push({
        name:"login"})
    
            },
            savePro(pro){
        
                this.pro=pro
            }
        },

### 7、组件中使用全局属性 ###

mapState:映射Pinia中的全局数据

> …mapState(userStore,\[‘age’,‘name’,‘desc’\]),  
> 将pinia中定义的全局数据映射为当前组件的计算属性  
> 从userStore对象中映射’age’,‘name’,'desc’参数  
> ![在这里插入图片描述][9e848650e7104d2f9a9f860bc39cbe3e.png]

### 8、组件中使用全局方法 ###

user.js  
![在这里插入图片描述][1b903c7e99f348e9999cb94b85df3705.png]  
AllProject.vue文件中  
导入映射方法的函数mapActions  
import \{ mapActions \} from ‘pinia’  
import \{ userStore \} from ‘…/store/user.js’  
![在这里插入图片描述][d6bf9e4d78da4c0aba0553c3109712ef.png]  
**`...mapActions(userStore,['logout','savePro']),`:将全局仓库中定义的savePro、logout方法映射为当前组件的方法**

![在这里插入图片描述][51beb208893d47a3a34d811387ce31cd.png]

### 9、当选择项目进入，展示该项目的信息 ###

![在这里插入图片描述][064dc182bb354ac0adbc2bd0b3d99ca3.png]

导入映射方法的函数mapActions  
![在这里插入图片描述][c6f46056669d4bc29f1abe1981bf2a60.png]

将全局定义的logout方法，映射为当前组件的logout方法  
`...mapActions(userStore,['logout','savePro']),`  
![在这里插入图片描述][2e9ec526b2924bf883a8d3e526254903.png]  
将项目信息保存到vue的全局数据存储仓库  
![在这里插入图片描述][6ea7910f204b4cc19f5c5ad7602305de.png]

### 10、修改Pinia中提供的数据 ###

通过定义计算属性  
![在这里插入图片描述][cd4ca65a38454b2ba50e9af5947e03d2.png]

## 二、获取项目的详细信息 ##

### 1、先将项目的信息导入进来 ###

![在这里插入图片描述][0ffb90ff9ae74bd6999c22932e365585.png]

### 2、定义接口：获取项目的详细信息 ###

getProjectInfo(id){
        
    	return http.get(`/projects/${
          id}`)
    },

### 3、发送请求 ###

created：生命周期钩子函数，最先开始执行的方法  
![在这里插入图片描述][db57fb73b0654c28af33a39c1774622d.png]

### 4、页面上获取到了项目信息 ###

![在这里插入图片描述][f276768edc5a49d0858e8611169a7e5f.png]  
![在这里插入图片描述][ed1393fbe68b40eca1b03f99dc9e58cc.png]

### 5、解决数据持久化问题 ###

安装插件：pinia-plugin-persist  
注册  
![在这里插入图片描述][56ef0bb3c296415696bfe4b9a66ee366.png]  
配置  
![在这里插入图片描述][a1ae51713c2943a9898bf61bb51770fa.png]

[c055fd31d30b42f29f5a578a9635ff51.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/1a716883b3944c93bf2b2b7e7ce3b81e.png
[220a3114db66410380c253611ea560ab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/aff5e1c3a10545c0ab556782492f8e98.png
[dcc69eed2b2e4d2e9cf511c93e4aed9f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/b0ff5bae8d9c4bfeb1ee95b3863f9ecc.png
[68dd3c17ddc040e6a36d62e7a93d7cc3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/7d54423845d745aeafd99c25b06557ec.png
[c41d9c1dd702468983b668b3a25d00b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/317f8d74a60a45a9917149eb650186db.png
[099d8e0c5b5c4849ab3912abebc67706.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/ab0314e0c13149849e0137bdfddeadf8.png
[9e848650e7104d2f9a9f860bc39cbe3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/0f8fd5d734dd4e078d8e21b346e9369c.png
[1b903c7e99f348e9999cb94b85df3705.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/59260662bde74dbf9318925c168bcf18.png
[d6bf9e4d78da4c0aba0553c3109712ef.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/24e1312254344db494c74375f76c8280.png
[51beb208893d47a3a34d811387ce31cd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/7a7e7f1fc3bf45e68e191bd1ca81ba64.png
[064dc182bb354ac0adbc2bd0b3d99ca3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/905baee9e810409ca73d7dc206430e12.png
[c6f46056669d4bc29f1abe1981bf2a60.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/7187b4a23ef7466bb1d1d2141da56bb5.png
[2e9ec526b2924bf883a8d3e526254903.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/84b0cfe222bc44ef8ed6aeb6e19afa2e.png
[6ea7910f204b4cc19f5c5ad7602305de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/f8473a8aeda64bd9a162a078dff08120.png
[cd4ca65a38454b2ba50e9af5947e03d2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/42a0f1cd0c7b473b984dd15a358c8928.png
[0ffb90ff9ae74bd6999c22932e365585.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/339948c8a35746f29404211bc4090d5d.png
[db57fb73b0654c28af33a39c1774622d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/f28c1953405f4f2ea5b722b2c5cb8567.png
[f276768edc5a49d0858e8611169a7e5f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/2df4e4b90b3d4536ae7e9a42b75e2999.png
[ed1393fbe68b40eca1b03f99dc9e58cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/1e424f6c134241ee94a7bb863df137fe.png
[56ef0bb3c296415696bfe4b9a66ee366.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/ca84639a86f44300aecabb9f5a5a56b0.png
[a1ae51713c2943a9898bf61bb51770fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/25/cb5e7e25d96242469467b8068832c11f.png