Vue.js前端开发实战（第2版） 课件 第7、8章 网络请求和状态管理、项目实战-“微商城”前后台开发

第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步骤1步骤27.3.6Pinia持久化存储使用Pinia实现全部数据持久化存储>>接上页代码

{key:'user',storage:localStorage}]}步骤3步骤4步骤1步骤27.3.6Pinia持久化存储使用Pinia实现全部数据持久化存储在src\components\User.vue文件中定义changeAge()方法，在该方法中调用actions中定义的changeAge()方法。constchangeAge=()=>{user.changeAge()}步骤3步骤4步骤1步骤27.3.6Pinia持久化存储使用Pinia实现全部数据持久化存储修改src\main.js文件，切换页面中显示的组件。importAppfrom'./components/User.vue'步骤3步骤4步骤1步骤27.3.6Pinia持久化存储使用Pinia实现全部数据持久化存储全部数据持久化存储的初始页面效果、单击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实现部分数据持久化存储changeName(){='小亮'}7.3.6Pinia持久化存储修改src\store\user.js文件中持久化存储的代码，通过paths指定要持久化存储的字段。persist:{enabled:true,strategies:[{key:'user',storage:localStorage,paths:['age']}],}步骤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()方法。constchangeName=()=>{user.changeName()}步骤3步骤4步骤1步骤27.3.6Pinia持久化存储使用Pinia实现部分数据持久化存储打开开发者工具，在控制台面板中执行localStorage.clear()清除localStorage数据，清除后关闭开发者工具并刷新页面，部分数据持久化存储的初始页面效果如下图所示。7.3.6Pinia持久化存储单击“增加年龄”按钮，年龄从18变为19；单击“改变姓名”按钮，姓名会从“小明”变为“小亮”，年龄改变的效果、姓名改变的效果如下图所示。7.3.6Pinia持久化存储年龄改变的效果姓名改变的效果刷新页面后的页面效果如下图所示。7.3.6Pinia持久化存储页面中显示的年龄为19，姓名为小明，说明成功实现了年龄数据的持久化存储效果。注意本章小结本章对Axios、Vuex和Pinia的相关内容进行了详细介绍。首先介绍了Axios的概念、安装和使用方法，并使用Axios实现了图书列表案例；然后介绍了Vuex的概念、安装和使用，并使用Vuex实现了计数器案例；最后介绍了Pinia的概念、安装和使用方法，并使用Pinia实现了计数器案例、模块化和持久化存储。通过本章的学习，读者能够将所学技术运用到实际项目开发中。本章小结《Vue.js前端开发实战（第2版）》第8章项目实战——“微商城”前后台开发学习目标/Target

熟悉项目的前台页面效果，能够说出前台项目包含的页面和主要功能熟悉项目的后台页面效果，能够说出后台项目包含的页面和主要功能掌握项目的具体实现，能够独立完成项目各个页面的编写章节概述/Summary随着移动通信技术和互联网行业技术的发展，移动电子商务的应用越来越广泛，移动端订单数量占比很大，表明移动电子商务平台有巨大的发展空间和潜力。“微商城”项目分为前台和后台，前台是一个电子商务移动端网站，用于展示商品，用户可以进入网站浏览商品并将需要购买的商品添加到购物车中；后台是一个管理系统，商家可以通过该系统实现对商品的分类、查询、添加、编辑、删除以及对个人信息的修改。本章将对“微商城”前后台开发项目实战进行讲解。目录/Contents8.18.2项目分析项目开发说明项目分析8.1

先定一个小目标！熟悉项目的前台页面效果，能够说出前台项目包含的页面和主要功能8.1.1项目前台分析“微商城”前台网站主要以适配移动设备的页面效果为主，可使用Chrome浏览器的开发者工具，测试页面在移动端模拟环境下的页面效果。“微商城”网站采用Vant组件库结合Vue3实现，主要包括“首页”“分类”“商品详情”“消息”“购物车”“我的”等页面。下面将对这些页面分别进行展示。8.1.1项目前台分析1.首页8.1.1项目前台分析首页上半部分首页中间部分首页下半部分8.1.1项目前台分析当用户未在搜索框中输入内容时，会默认显示“请输入搜索关键字”；当用户在搜索框中输入内容并获得焦点后，此时搜索框中会显示一个按钮，如果用户想要搜索内容，则可以单击按钮；如果用户想要清空输入的内容，则可以单击按钮。未输入内容时的搜索框状态输入内容时的搜索框状态“微商城”首页分析首页从上到下分别是搜索框、轮播图、功能按钮区、商品信息展示区、底部导航栏。搜索框：展示用户搜索的信息。轮播图：展示一组推广的商品图片。按钮功能区：展示功能内容。商品信息展示区：展示各种商品信息，例如每周上新的商品、热销商品等。底部导航栏：展示当前选中标签的名称。8.1.1项目前台分析2.分类8.1.1项目前台分析“微商城”分类分析分类页面分为左侧菜单栏和右侧商品列表。单击左侧菜单栏，右侧商品列表会滚动到相应的分类；滑动右侧商品列表，左侧菜单栏的样式会相应改变。8.1.1项目前台分析滚动效果在这里使用better-scroll插件实现，核心借鉴了iscroll的实现原理，相应的API设计基本兼容iscroll，但是在iscroll基础上又做了扩展和性能优化。3.商品详情8.1.1项目前台分析商品详情上半部分商品详情下半部分“微商城”商品详情页分析单击分类页面中的商品，会跳转到相应商品的详情，商品详情页介绍如下。顶部通过轮播图的形式显示商品的图片；轮播图下面显示商品的标题、价格、运费和剩余库存等；单击顶部的返回按钮

会跳转到分类页面；底部显示了“客服”按钮、“购物车”按钮、“加入购物车”按钮和“立即购买”按钮；通过单击“加入购物车”按钮可以完成商品加入购物车的操作。单击“购物车”可以跳转到购物车页面。8.1.1项目前台分析4.消息8.1.1项目前台分析“微商城”消息分析消息页面用于展示已设置接收消息的群组列表，例如店铺消息、消息号内容、订阅号消息等，可以方便查找用户与客服的聊天记录。8.1.