《Vue应用开发》课件-7.3.6Pinia持久化存储

在项目开发中，使用Pinia进行状态管理时，若想要刷新浏览器后，仍保留之前的操作状态，可以通过Pinia的持久化插件pinia-plugin-persist实现。7.3.6Pinia持久化存储7.3.6Pinia持久化存储使用npm或yarn包管理工具安装pinia-plugin-persist。#使用npm包管理工具安装npminstallpinia-plugin-persist--save#使用yarn包管理工具安装yarnaddpinia-plugin-persist--save下面以my-pinia项目为例，演示如何使用Pinia实现全部数据持久化存储。当用户单击“增加年龄”按钮时，年龄值将会改变，此时关闭浏览器或刷新页面后，要求页面显示最新修改的年龄值。7.3.6Pinia持久化存储1.全部数据持久化存储步骤1在src\components\User.vue文件中定义“增加年龄”按钮。步骤3步骤4步骤2使用Pinia实现全部数据持久化存储<template><div>user模块：

<p>姓名：{{name}}</p><p>性别：{{sex}}</p><p>年龄：{{age}}</p><button@click="changeAge">增加年龄</button></div></template>7.3.6Pinia持久化存储修改src\store\user.js文件，在actions中定义一个改变年龄的方法，并实现持久化存储。步骤3步骤4步骤1步骤27.3.6Pinia持久化存储使用Pinia实现全部数据持久化存储>>接上页代码步骤3步骤4步骤1步骤27.3.6Pinia持久化存储使用Pinia实现全部数据持久化存储在src\components\User.vue文件中定义changeAge()方法，在该方法中调用actions中定义的changeAge()方法。步骤3步骤4步骤1步骤27.3.6Pinia持久化存储使用Pinia实现全部数据持久化存储修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/User.vue'步骤3步骤4步骤1步骤27.3.6Pinia持久化存储使用Pinia实现全部数据持久化存储在src\main.js文件中导入并挂载pinia-plugin-persist插件。import{createApp}from'vue'import'./style.css'import{createPinia}from'pinia'importpiniaPluginPersistfrom'pinia-plugin-persist'importAppfrom'./components/Shop.vue'constpinia=createPinia()pinia.use(piniaPluginPersist)constapp=createApp(App)app.use(pinia)app.mount('#app')7.3.6Pinia持久化存储在my-pinia项目中安装pinia-plugin-persist全部数据持久化存储的初始页面效果、单击2次“增加年龄”按钮后的页面效果如下图所示。全部数据持久化存储的初始页面效果单击2次“增加年龄”按钮后的页面效果7.3.6Pinia持久化存储单击2次“增加年龄”按钮后，会发现年龄值变为了20，此时刷新页面后，年龄值仍为20，表明已实现数据的持久化存储。注意下面以my-pinia项目为例，演示如何使用Pinia实现部分数据持久化存储。在页面中新增一个“改变姓名”按钮，当用户单击“增加年龄”按钮时，年龄值将会改变；当用户单击“改变姓名”按钮时，姓名值将会改变。当关闭浏览器或刷新页面后，要求页面显示最新修改的年龄值，而不保存最新修改的姓名值。7.3.6Pinia持久化存储2.部分数据持久化存储步骤1修改src\store\user.js文件，在actions中定义一个改变姓名的方法。步骤3步骤4步骤2使用Pinia实现部分数据持久化存储7.3.6Pinia持久化存储修改src\store\user.js文件中持久化存储的代码，通过paths指定要持久化存储的字段。步骤3步骤4步骤1步骤27.3.6Pinia持久化存储使用Pinia实现部分数据持久化存储在src\components\User.vue文件中找到“增加年龄”按钮，在该按钮下方增加一个“改变姓名”按钮。<button@click="changeName">改变姓名</button>步骤3步骤4步骤1步骤27.3.6Pinia持久化存储使用Pinia实现部分数据持久化存储修改src\components\User.vue文件，定义changeName()方法，在该方法中调用actions中定义的changeName()方法。步骤3步骤4步骤1步骤27.3.6Pinia持久化存储使用Pinia实现部分数据持久化存储打开开发者工具，在控制台面板中执行localStorage.clear()清除localStorage数据，清除后关闭开发者工具并刷新页面，部分数据持久化存储的初始页面效果如下图所示。7.3.6Pinia持久化存储单击“增加年龄”按钮，年龄从18变为19；单击“改变姓名”按钮，姓名会从“小明”变为“小亮”，年龄改变的效