Vue.js前端开发实战（第2版） 课件 第7章 网络请求和状态管理

第7章网络请求和状态管理《Vue.js前端开发实战（第2版）》学习目标/Target

了解Axios的基本概念，能够说出Axios的功能和主要特性

掌握Axios的安装和使用方法，能够在项目中安装并使用Axios掌握Axios图书列表案例的实现，能够使用Axios完成网络请求

了解Vuex的基本概念，能够说出Vuex的工作原理学习目标/Target

掌握Vuex的安装和使用方法，能够在项目中安装并使用Vuex

掌握Vuex计数器案例的实现，能够运用Vuex完成计数器效果

了解Pinia的基本概念，能够说出Pinia的功能和优点

掌握Pinia的安装和使用方法，能够在项目中安装并使用Pinia学习目标/Target

掌握Pinia计数器案例的实现，能够运用Pinia完成计数器效果

熟悉Pinia模块化，能够阐述Pinia模块化的实现原理掌握Pinia持久化存储，能够运用Pinia实现全部数据或部分数据的持久化存储章节概述/Summary在前面的开发案例中，数据都是直接定义在组件中的；而在实际开发中，项目的数据需要从服务器中获得。当我们希望互联网上的其他用户访问我们自己编写的网页时，就需要用到服务器了。在传统的网页开发中，一般使用Ajax实现JavaScript程序与服务器交互，而在Vue中，则更推荐使用Axios实现JavaScript程序与服务器交互。如果希望在项目中跨组件或页面存储、共享一些数据以实现数据的状态管理，可以使用Vuex和Pinia。本章将讲解Axios、Vuex和Pinia的使用。目录/Contents7.17.27.3AxiosVuexPiniaAxios7.1

先定一个小目标！了解Axios的基本概念，能够说出Axios的功能和主要特性7.1.1Axios概述什么是Axios？7.1.1Axios概述Axios是一个基于Promise的HTTP库，可以发送get、post等请求，它作用于浏览器和Node.js中。当运行在浏览器时，使用XMLHttpRequest接口发送请求；当运行在Node.js时，使用HTTP对象发送请求。7.1.1Axios概述7.1.1Axios概述Axios的主要特性如下。支持所有的

API。支持拦截请求和响应。可以转换请求数据和响应数据，并可以将响应的内容自动转换为JSON类型的数据。安全性高，客户端支持防御跨站请求伪造（Cross-SiteRequestForgery，CSRF）。

先定一个小目标！掌握Axios的安装方法，能够在项目中安装Axios7.1.2安装Axios通过标签引入使用Unpkg或jsDelivr的内容分发网络服务提供的Axios文件，也可以将Axios文件下载至本地再引入。使用包管理工具安装使用npm或yarn包管理工具安装Axios。Axios的安装方式主要有两种，一种是通过标签引入，另一种是使用包管理工具安装。

7.1.2安装Axios7.1.2安装Axios①使用Unpkg的CDN服务引入Axios。1.通过标签引入<scriptsrc="/axios/dist/axios.min.js"></script>②使用jsDelivr的CDN服务引入Axios。<scriptsrc="/npm/axios/dist/axios.min.js"></script>读者也可以从Axios官方网站中直接下载Axios，下载后再将文件引入网页。因为需要将文件下载到本地，所以不需要考虑无网络的情况。注意7.1.2安装Axios使用npm或yarn包管理工具安装Axios。2.使用包管理工具安装#使用npm包管理工具安装npminstallaxios--save#使用yarn包管理工具安装yarnaddaxios--save在Vue3项目中使用yarn安装Axios打开命令提示符，切换到D:\vue\chapter07目录，使用yarn创建一个名称为my-axios的项目。yarncreatevitemy-axios--templatevue项目名称7.1.2安装Axios步骤1步骤3步骤2在Vue3项目中使用yarn安装Axios7.1.2安装Axios步骤1步骤3步骤2在命令提示符中，切换到my-axios目录，为项目安装所有依赖。cdmy-axiosyarn在my-axios目录下使用yarn安装Axios。yarnaddaxios@1.2.1--save@1.2.1表示安装Axios的版本号项目运行时依赖7.1.2安装Axios在Vue3项目中使用yarn安装Axios步骤1步骤3步骤2使用VSCode编辑器打开my-axios目录，执行命令启动服务。7.1.2安装Axios在Vue3项目中使用yarn安装Axiosyarndev项目启动后，会默认开启一个本地服务，地址为:5173/。步骤1步骤3步骤2

先定一个小目标！掌握Axios的使用方法，能够在项目中使用Axios7.1.3使用AxiosAxios安装完成后，如何使用呢？7.1.3使用Axios在项目中使用Axios时，通常的做法是先将Axios封装成一个模块，然后在组件中导入模块。7.1.3使用Axios7.1.3使用Axios①将Axios封装成模块，创建src\axios\request.js文件。importaxiosfrom'axios'constrequest=axios.create({timeout:2000})exportdefaultrequest②在组件中导入模块，在src\App.vue文件中导入模块。importrequestfrom'./axios/request.js'7.1.3使用AxiosAxios常用的请求方式：get请求和post请求。request({url:'请求路径',method:'get',params:{参数}}).then(res=>{console.log(res)}).catch(error=>{console.log(error)})①使用Axios发送get请求的基本语法格式。request({url:'请求路径',method:'post',data:{参数}}).then(res=>{console.log(res)}).catch(error=>{console.log(error)})②使用Axios发送post请求的基本语法格式。

先定一个小目标！掌握Axios图书列表案例的实现，能够使用Axios完成网络请求7.1.4Axios图书列表案例7.1.4Axios图书列表案例使用Axios实现图书列表案例，图书列表页面初始效果如下图所示。7.1.4Axios图书列表案例单击上图中“请求数据”按钮，数据请求成功页面效果如下图所示。图书列表案例的实现分为以下2步。模拟数据1请求数据27.1.4Axios图书列表案例模拟数据：为了方便演示，使用mockjs模拟后端接口，下面讲解如何安装mockjs，以及编写模拟数据和配置模拟数据的相关信息。7.1.4Axios图书列表案例步骤1在my-axios目录下，使用yarn安装mockjs。步骤3步骤4步骤2使用mockjs模拟后端接口7.1.4Axios图书列表案例yarnaddmockjs@1.1.0--save创建src\mock\books.json文件，该文件用于存放模拟的数据。[{"id":1,"name":"西游记","author":"吴承恩"},{"id":2,"name":"红楼梦","author":"曹雪芹"},步骤3步骤4步骤1步骤27.1.4Axios图书列表案例使用mockjs模拟后端接口>>接上页代码

{"id":3,"name":"三国演义","author":"罗贯中"},{"id":4,"name":"水浒传","author":"施耐庵"}]步骤3步骤4步骤1步骤27.1.4Axios图书列表案例使用mockjs模拟后端接口创建src\mock\mockServer.js文件，该文件用于配置模拟数据的相关信息。importMockfrom'mockjs'importbooksfrom'./books.json'Mock.mock('/mock/getBooks','get',{code:200, //请求成功的状态码

data:books //模拟的请求数据})步骤3步骤4步骤1步骤27.1.4Axios图书列表案例使用mockjs模拟后端接口修改src\main.js文件，在创建Vue应用实例前导入mockServer.js文件。import'./mock/mockServer.js'步骤3步骤4步骤1步骤27.1.4Axios图书列表案例使用mockjs模拟后端接口请求数据：后端接口和模拟数据准备好之后，就可以请求接口、获取数据了。下面讲解如何在页面中请求接口并获取数据。7.1.4Axios图书列表案例步骤1清空src\App.vue文件中的内容。步骤3步骤4步骤2步骤5在页面中请求接口并获取数据7.1.4Axios图书列表案例<template>

<divclass="box">

<button>请求数据</button>

<tablewidth="90%"class="table">

<caption>

<h2>图书列表</h2>

</caption>

<thead>

<tr>

<th>编号</th>

<th>书名</th>步骤1>>接上页代码步骤3步骤4步骤2步骤5在页面中请求接口并获取数据7.1.4Axios图书列表案例

<th>作者</th>

</tr>

</thead>

<tbody>

<!--主体内容-->

</tbody>

</table>

</div></template>在src\App.vue文件中编写样式代码。<style>body,html{

width:100%;

height:100%;}#app{

width:100%!important;}table{

border-collapse:collapse;

margin:0auto;

text-align:center;步骤3步骤4步骤5步骤1步骤27.1.4Axios图书列表案例在页面中请求接口并获取数据

}tabletd,tableth{

border:1pxsolid#cad9ea;

color:#666;

height:30px;}tabletheadth{

background-color:#CCE8EB;

width:100px;}步骤3步骤4步骤5步骤1步骤27.1.4Axios图书列表案例在页面中请求接口并获取数据>>接上页代码tabletr:nth-child(odd){

background:#fff;}tabletr:nth-child(even){

background:#F5FAFA;}</style>步骤3步骤4步骤5步骤1步骤27.1.4Axios图书列表案例在页面中请求接口并获取数据>>接上页代码为“请求数据”按钮绑定单击事件处理方法。<button@click="getData">请求数据</button>步骤3步骤4步骤5步骤1步骤27.1.4Axios图书列表案例在页面中请求接口并获取数据在src\App.vue文件中请求接口数据。<scriptsetup>import{reactive}from'vue'importrequestfrom'./axios/request.js'constbookData=reactive({

list:[]})//测试请求方法步骤3步骤4步骤5步骤1步骤27.1.4Axios图书列表案例在页面中请求接口并获取数据constgetData=function(){

request({

url:'/mock/getBooks',

method:'get'

}).then(res=>{

bookData.list=res.data.data

console.log(res.data.data)

}).catch(error=>{console.log(error)})}</script>步骤3步骤4步骤5步骤1步骤27.1.4Axios图书列表案例在页面中请求接口并获取数据>>接上页代码在src\App.vue文件中编写主体内容。<tbodyv-for="iteminbookData.list":key="item.id"><!--主体内容--><tr><td>{{item.id}}</td><td>{{}}</td><td>{{item.author}}</td></tr></tbody>步骤3步骤4步骤5步骤1步骤27.1.4Axios图书列表案例在页面中请求接口并获取数据Vuex7.2

先定一个小目标！了解Vuex的基本概念，能够说出Vuex的工作原理7.2.1Vuex概述什么是Vuex？7.2.1Vuex概述Vuex是一个专为Vue开发的状态管理库，它采用集中式存储的方式管理应用的所有组件的状态，解决了多组件数据通信的问题，使数据操作更加简洁。7.2.1Vuex概述如何理解Vue中的单向数据流机制？在Vue中，组件的状态变化是通过单向数据流的设计理念实现的，单向数据流是指只能从一个方向修改状态，主要包含以下3个部分。状态（State）：驱动应用的数据源。视图（View）：以声明方式将状态映射到视图。操作（Actions）：响应在视图上的用户输入导致的状态变化。7.2.1Vuex概述Vuex的工作流程如下图所示。7.2.1Vuex概述

先定一个小目标！掌握Vuex的安装方法，能够在项目中安装Vuex7.2.2安装Vuex通过标签引入使用Unpkg的CDN服务提供的Vuex文件，也可以将Vuex文件下载至本地再引入。使用包管理工具安装使用npm或yarn包管理工具安装Vuex。Vuex的安装方式主要有两种，一种是通过标签引入，另一种是使用包管理工具安装。

7.2.2安装Vuex使用Unpkg的CDN服务引入Vuex。1.通过标签引入<scriptsrc="/vuex@next"></script>读者也可以从Vuex官方网站直接下载Vuex，下载后再将文件引入网页。注意7.2.2安装Vuex使用npm或yarn包管理工具安装Vuex。2.使用包管理工具安装#使用npm包管理工具安装npminstallvuex--save#使用yarn包管理工具安装yarnaddvuex--save7.2.2安装Vuex在Vue3项目中使用yarn安装Vuex打开命令提示符，切换到D:\vue\chapter07目录，使用yarn创建一个名称为my-vuex的项目。yarncreatevitemy-vuex--templatevue项目名称步骤1步骤3步骤27.2.2安装Vuex在Vue3项目中使用yarn安装Vuex步骤1步骤3步骤27.2.2安装Vuex在命令提示符中，切换到my-vuex目录，为项目安装所有依赖。cdmy-vuexyarn在my-vuex目录下使用yarn安装Vuex。yarnaddvuex@4.0.2--save@4.0.2表示安装Vuex的版本号项目运行时依赖步骤1步骤3步骤27.2.2安装Vuex在Vue3项目中使用yarn安装Vuex使用VSCode编辑器打开my-vuex目录，执行命令启动服务。yarndev项目启动后，会默认开启一个本地服务，地址为:5173/。步骤1步骤3步骤27.2.2安装Vuex在Vue3项目中使用yarn安装Vuex

先定一个小目标！掌握Vuex的使用方法，能够在项目中使用Vuex7.2.3使用VuexVuex安装完成后，如何使用呢？7.2.3使用Vuex在项目中使用Vuex时，通常的做法是先在项目中创建一个store模块，然后导入并挂载store模块。store模块是用于管理状态数据的仓库。7.2.3使用Vuex①编写store模块，创建src\store\index.js文件。import{createStore}from'vuex'conststore=createStore({state:{},mutations:{},actions:{},getters:{},modules:{}})exportdefaultstore7.2.3使用Vuex管理数据更新数据定义事件处理方法再次编译，得到新的数据定义模块对象import{createApp}from'vue'import'./style.css'importstorefrom'./store' //导入store模块importAppfrom'./App.vue'constapp=createApp(App)app.use(store) //挂载store模块app.mount('#app')②在src\main.js文件中导入并挂载store模块。7.2.3使用Vuex

先定一个小目标！掌握Vuex计数器案例的实现，能够运用Vuex完成计数器效果7.2.4Vuex计数器案例要求使用Vuex实现计数器案例：计数器初始页面中定义2个初始数字0和100，定义“+”和“-”2个按钮。每次单击“+”按钮，数字从0自增1；每次单击“-”按钮，数字会从100自减1。7.2.4Vuex计数器案例计数器初始页面效果如下图所示。7.2.4Vuex计数器案例在计数器初始页面中单击“+”按钮，数字从0变为1，效果如下图所示。7.2.4Vuex计数器案例7.2.4Vuex计数器案例在计数器初始页面中单击“-”按钮，数字从100变为99，效果如下图所示。步骤1清空src\App.vue文件中的内容，重新编写如下代码。步骤3步骤4步骤2讲解计数器案例的实现7.2.4Vuex计数器案例<template><p>

每次增加1：<button@click="increment">+</button>

数字：0</p><p>

每次减少1：<button@click="reduction">-</button>

数字：100</p></template>步骤1>>接上页代码步骤3步骤4步骤2讲解计数器案例的实现7.2.4Vuex计数器案例<scriptsetup>constincrement=()=>{}constreduction=()=>{}</script><style>button{background-color:aquamarine;}</style>创建src\store\index.js文件。import{createStore}from'vuex'conststore=createStore({state:{add:0,reduce:100},mutations:{increase(state){state.add++},步骤3步骤4步骤1步骤27.2.4Vuex计数器案例讲解计数器案例的实现>>接上页代码decrease(state){state.reduce--}},actions:{},modules:{}})exportdefaultstore步骤3步骤4步骤1步骤27.2.4Vuex计数器案例讲解计数器案例的实现修改src\App.vue文件，提交increase()方法和decrease()方法。<scriptsetup>import{useStore}from'vuex'conststore=useStore()constincrement=()=>{mit('increase')}constreduction=()=>{mit('decrease')}</script>步骤3步骤4步骤1步骤27.2.4Vuex计数器案例讲解计数器案例的实现在<template>模板中获取state中的数据并显示在页面中。<p>

每次增加1：<button@click="increment">+</button>

数字：{{this.$store.state.add}}</p><p>

每次减少1：<button@click="decrement">-</button>

数字：{{this.$store.state.reduce}}</p>步骤3步骤4步骤1步骤27.2.4Vuex计数器案例讲解计数器案例的实现Pinia7.3

先定一个小目标！了解Pinia的基本概念，能够说出Pinia的功能和优点7.3.1Pinia概述什么是Pinia？7.3.1Pinia概述Pinia是新一代的轻量级状态管理库，它允许跨组件或页面共享状态，解决了多组件间的数据通信，使数据操作更加简洁。7.3.1Pinia概述Pinia与Vuex相比，主要优点如下。Pinia支持Vue2和Vue3，支持选项式API和组合式API写法。Pinia简化了状态管理库的使用方法，抛弃了mutations，只有state、getters和actions，让代码编写更容易也更直观。Pinia不需要嵌套模板，符合Vue3中的组合式API，让代码更加扁平化。Pinia提供了完整的TypeScript支持。Pinia分模块不需要借助modules，使代码更加简洁，可以实现良好的代码自动分隔。Pinia支持Devtools调试工具，便于进行调试。Pinia体积更小，性能更好。Pinia支持在某个组件中直接修改Pinia的state中的数据。Pinia支持服务端器渲染。7.3.1Pinia概述

先定一个小目标！掌握Pinia的安装方法，能够在项目中安装Pinia7.3.2安装Pinia使用npm或yarn包管理工具安装Pinia。#使用yarn包管理器安装yarnaddpinia--save#使用npm包管理器安装npminstallpinia--save7.3.2安装Pinia在Vue3项目中使用yarn安装Pinia打开命令提示符，切换到D:\vue\chapter07目录，使用yarn创建一个名称为my-pinia的项目。yarncreatevitemy-pinia

--templatevue项目名称步骤1步骤3步骤27.3.2安装Pinia在Vue3项目中使用yarn安装Pinia步骤1步骤3步骤27.3.2安装Pinia在命令提示符中，切换到my-pinia目录，为项目安装所有依赖。cdmy-piniayarn在my-pinia目录下使用yarn安装Pinia。yarnaddpinia@2.0.27--save@2.0.27表示安装Pinia的版本号项目运行时依赖步骤1步骤3步骤27.3.2安装Pinia在Vue3项目中使用yarn安装Pinia使用VSCode编辑器打开my-pinia目录，执行命令启动服务。yarndev项目启动后，会默认开启一个本地服务，地址为:5173/。步骤1步骤3步骤27.3.2安装Pinia在Vue3项目中使用yarn安装Pinia

先定一个小目标！掌握Pinia的使用方法，能够在项目中使用Pinia7.3.3使用PiniaPinia安装完成后，如何使用呢？7.3.3使用Pinia在项目中使用Pinia时，通常先在项目中创建一个store模块，然后创建并挂载Pinia实例。其中，store模块是用于管理状态数据的仓库。7.3.3使用Pinia①编写store模块，创建src\store\index.js文件。import{defineStore}from'pinia'exportconstuseStore=defineStore('storeId',{state:()=>{},getters:{},actions:{}})导入defineStore()函数状态管理容器的名称定义事件处理方法再次编译，得到新的数据管理数据7.3.3使用Piniaimport{createApp}from'vue'import'./style.css'import{createPinia}from'pinia'importAppfrom'./App.vue'constapp=createApp(App)constpinia=createPinia() //创建Pinia实例app.use(pinia) //导入Pinia实例app.mount('#app')②在src\main.js文件中创建并挂载Pinia实例。7.3.3使用Pinia

先定一个小目标！掌握Pinia计数器案例的实现，能够运用Pinia完成计数器效果7.3.4Pinia计数器案例要求使用Pinia实现计数器案例：计数器初始页面定义了2个初始数字0和100，定义了“+”和“-”2个按钮。每次单击“+”按钮，数字从0自增1；每次单击“-”按钮，数字会从100自减1。7.3.4Pinia计数器案例计数器初始页面效果如下图所示。7.3.4Pinia计数器案例在计数器初始页面中单击“+”按钮，其后数字从0变为1，效果如下图所示。7.3.4Pinia计数器案例在计数器初始页面中单击“-”按钮，其后数字从100变为99，效果如下图所示。7.3.4Pinia计数器案例步骤1清空src\App.vue文件中的内容，重新编写如下代码。步骤3步骤4步骤2讲解计数器案例的实现<template><p>

每次增加1：<button@click="increment">+</button>

数字：0</p><p>

每次减少1：<button@click="reduction">-</button>

数字：100</p></template>7.3.4Pinia计数器案例步骤1>>接上页代码步骤3步骤4步骤2讲解计数器案例的实现<scriptsetup>constincrement=()=>{}constreduction=()=>{}</script><style>button{background-color:aquamarine;}</style>7.3.4Pinia计数器案例创建src\store\index.js文件。import{defineStore}from'pinia'exportconstuseStore=defineStore('storeId',{state:()=>{return{add:0,reduce:100}},步骤3步骤4步骤1步骤2讲解计数器案例的实现7.3.4Pinia计数器案例>>接上页代码getters:{},actions:{increase(){this.add++},decrease(){this.reduce--}}})步骤3步骤4步骤1步骤2讲解计数器案例的实现7.3.4Pinia计数器案例修改src\App.vue文件，调用actions中定义的increase()方法和decrease()方法。<scriptsetup>import{useStore}from'./store'import{storeToRefs}from'pinia'conststore=useStore()const{add,reduce}=storeToRefs(store)constincrement=()=>{store.increase()}constreduction=()=>{store.decrease()}</script>步骤3步骤4步骤1步骤2讲解计数器案例的实现7.3.4Pinia计数器案例在<template>模板中输出state中的数据，显示在页面中。<p>

每次增加1：<button@click="increment">+</button>

数字：{{add}}</p><p>

每次减少1：<button@click="reduction">-</button>

数字：{{reduce}}</p>步骤3步骤4步骤1步骤2讲解计数器案例的实现7.3.4Pinia计数器案例

先定一个小目标！熟悉Pinia模块化，能够阐述Pinia模块化的实现原理7.3.5Pinia模块化Pinia模块化应用场景？7.3.5Pinia模块化7.3.5Pinia模块化在复杂的大型项目中，如果将多个模块的数据都定义到一个store对象中，那么store对象将变得非常大且难以管理，此时，可以使用Pinia直接定义多个模块，Pinia不需要像Vuex一样使用modules模块，它可以在src\store目录中直接定义对应模块，一个.js文件为一个模块。在src\store目录下，新建user.js和shop.js文件作为两个模块，其中，user.js文件用于保存用户信息数据，shop.js文件用于保存商品信息数据。7.3.5Pinia模块化步骤1创建src\store\user.js文件，编写用户信息数据。步骤3步骤4步骤2讲解user.js和shop.js模块的创建import{defineStore}from'pinia'exportconstuseUserStore=defineStore('user',{state:()=>{return{name:'小明',sex:'男',age:18}},getters:{},actions:{}})7.3.5Pinia模块化步骤5步骤6创建src\store\shop.js文件，编写商品信息数据。import{defineStore}from'pinia'exportconstuseShopStore=defineStore('shop',{state:()=>{return{list:[{id:'01',name:'手机',price:2000},步骤3步骤4步骤1步骤27.3.5Pinia模块化讲解user.js和shop.js模块的创建步骤5步骤6

{id:'02',name:'音响',price:5000}]}},getters:{},actions:{}})步骤3步骤4步骤1步骤27.3.5Pinia模块化讲解user.js和shop.js模块的创建>>接上页代码步骤5步骤6>>接上页代码getters:{},actions:{increase(){this.add++},decrease(){this.reduce--}}})步骤3步骤4步骤1步骤27.3.5Pinia模块化讲解user.js和shop.js模块的创建步骤5步骤6创建src\components\User.vue文件，在页面中显示用户信息数据。<template><div>user模块：

<p>姓名：{{name}}</p><p>性别：{{sex}}</p><p>年龄：{{age}}</p></div></template><scriptsetup>import{useUserStore}from'../store/user.js'import{storeToRefs}from'pinia'constuser=useUserStore()const{name,sex,age}=storeToRefs(user)</script>步骤3步骤4步骤1步骤27.3.5Pinia模块化讲解user.js和shop.js模块的创建步骤5步骤6修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/User.vue'步骤3步骤4步骤1步骤27.3.5Pinia模块化讲解user.js和shop.js模块的创建保存上述代码，在浏览器中访问:5173/，user模块的页面效果如下图所示。步骤5步骤6创建src\components\Shop.vue文件，在页面中显示商品信息数据。<template>shop模块：

<divv-for="iteminlist"><p>商品id：{{item.id}}</p><p>商品名称：{{}}</p><p>商品价格：{{item.price}}元</p></div></template>步骤3步骤4步骤1步骤27.3.5Pinia模块化讲解user.js和shop.js模块的创建步骤5步骤6>>接上页代码<scriptsetup>import{useShopStore}from'../store/shop.js'import{storeToRefs}from'pinia'constshop=useShopStore()const{list}=storeToRefs(shop)</script>步骤3步骤4步骤1步骤27.3.5Pinia模块化讲解user.js和shop.js模块的创建步骤5步骤6修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/Shop.vue'步骤3步骤4步骤1步骤27.3.5Pinia模块化讲解user.js和shop.js模块的创建保存上述代码，在浏览器中访问:5173/，shop模块的页面效果如下图所示。步骤5步骤6

先定一个小目标！掌握Pinia持久化存储，能够运用Pinia实现全部数据或部分数据的持久化存储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-plugin-persist步骤1步骤3步骤27.3.6Pinia持久化存储在my-pinia目录下使用yarn安装pinia-plugin-persist插件。yarnaddpinia-plugin-persist@1.0.0--save@1.0.0表示安装pinia-plugin-persist的版本号项目运行时依赖步骤1步骤3步骤27.3.6Pinia持久化存储在my-pinia项目中安装pinia-plugin-persist使用VSCode编辑器打开my-pinia目录，执行命令启动服务。yarndev在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')步骤1步骤3步骤27.3.6Pinia持久化存储在my-pinia项目中安装pinia-plugin-persist挂载pinia-plugin-persist插件后，在模块中实现持久化存储的示例代码如下。步骤1步骤3步骤27.3.6Pinia持久化存储在my-pinia项目中安装pinia-plugin-persistpersist:{enabled:true, //开启数据缓存strategies:[{key:'StoreId1', //当前store的idstorage:localStorage, //存储方式paths:['字段'] //指定要持久化的字段

}]}下面以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中定义一个改变年龄的方法，并实现持久化存储。actions:{changeAge(){this.age++},},persist:{enabled:true,strategies:[步骤3步骤4步骤