章节概述**/** Summary
在前面的开发案例中，数据都是直接定义在组件中的；而在实际开发中，项目的数据需要从服务器中获得。当我们希望互联网上的其他用户访问我们自己编写的网页时，就需要用到服务器了。在传统的网页开发中，一般使用Ajax实现JavaScript程序与服务器交互，而在Vue中，则更推荐使用Axios实现JavaScript程序与服务器交互。如果希望在项目中跨组件或页面存储、共享一些数据以实现数据的状态管理，可以使用Vuex和Pinia。本章将讲解Axios、Vuex和Pinia的使用。
Axios
Axios****概述
Axios是一个基于Promise的HTTP库，可以发送get、post等请求，它作用于浏览器和Node.js中。当运行在浏览器时，使用XMLHttpRequest接口发送请求；当运行在Node.js时，使用HTTP对象发送请求。
Axios的主要特性如下：
- 支持所有的 API。
- 支持拦截请求和响应。
- 可以转换请求数据和响应数据，并可以将响应的内容自动转换为JSON类型的数据。
- 安全性高，客户端支持防御跨站请求伪造（Cross-Site Request Forgery，CSRF）。
安装****Axios
Axios的安装方式主要有两种，一种是通过标签引入，另一种是使用包管理工具安装
通过标签引入
使用Unpkg或jsDelivr的内容分发网络服务提供的Axios文件，也可以将Axios文件下载至本地再引入。
使用****包管理工具安装
使用npm或yarn包管理工具安装Axios。
1. 通过标签引入
① 使用Unpkg的CDN服务引入Axios。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
② 使用jsDelivr的CDN服务引入Axios。
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
注意：读者也可以从Axios官方网站中直接下载Axios，下载后再将文件引入网页。因为需要将文件下载到本地，所以不需要考虑无网络的情况。
2. 使用包管理工具安装
使用npm或yarn包管理工具安装Axios。
# 使用npm包管理工具安装
npm install axios --save
# 使用yarn包管理工具安装
yarn add axios --save
在Vue3项目中使用yarn安装A****xios
使用****Axios
在项目中使用Axios时，通常的做法是先将Axios封装成一个模块，然后在组件中导入模块。
① 将Axios封装成模块，创建src\axios\request.js文件。
import axios from 'axios'
const request = axios.create({
timeout: 2000
})
export default request
② 在组件中导入模块，在src\App.vue文件中导入模块。
import request from './axios/request.js'
Axios常用的请求方式：get请求和post请求。
① 使用Axios发送get请求的基本语法格式。
request({
url: '请求路径',
method: 'get',
params: { 参数 }
}).then(res => {
console.log(res)
}).catch(error => {
console.log(error)
})
② 使用Axios发送post请求的基本语法格式
request({
url: '请求路径',
method: 'post',
data: { 参数 }
}).then(res => {
console.log(res)
}).catch(error => {
console.log(error)
})
Axios****图书列表案例
使用Axios实现图书列表案例，图书列表页面初始效果如下图所示。
单击上图中"请求数据"按钮，数据请求成功页面效果如下图所示。
图书列表案例的实现分为以下2步。
模拟数据：
为了方便演示，使用mockjs模拟后端接口，下面讲解如何安装mockjs，以及编写模拟数据和配置模拟数据的相关信息。
使用mockjs模拟后端接口
请求数据：
后端接口和模拟数据准备好之后，就可以请求接口、获取数据了。下面讲解如何在页面中请求接口并获取数据。
在页面中请求接口并获取数据
Vuex
Vuex****概述
Vuex是一个专为Vue开发的状态管理库，它采用集中式存储的方式管理应用的所有组件的状态，解决了多组件数据通信的问题，使数据操作更加简洁。
在Vue中，组件的状态变化是通过单向数据流的设计理念实现的，单向数据流是指只能从一个方向修改状态，主要包含以下3个部分。
- 状态（State）：驱动应用的数据源。
- 视图（View）：以声明方式将状态映射到视图。
- 操作（Actions）：响应在视图上的用户输入导致的状态变化。
Vuex的工作流程如下图所示。
安装****Vuex
Vuex的安装方式主要有两种，一种是通过标签引入，另一种是使用包管理工具安装。
通过标签引入
使用Unpkg的CDN服务提供的Vuex文件，也可以将Vuex文件下载至本地再引入。
使用****包管理工具安装
使用npm或yarn包管理工具安装Vuex。
1. 通过标签引入
使用Unpkg的CDN服务引入Vuex。
<script src="https://unpkg.com/vuex@next"></script>
注意：读者也可以从Vuex官方网站直接下载Vuex，下载后再将文件引入网页。
2. 使用包管理工具安装
使用npm或yarn包管理工具安装Vuex。
# 使用npm包管理工具安装
npm install vuex --save
# 使用yarn包管理工具安装
yarn add vuex --save
在Vue3项目中使用yarn安装Vuex
使用****Vuex
在项目中使用Vuex时，通常的做法是先在项目中创建一个store模块，然后导入并挂载store模块。store模块是用于管理状态数据的仓库。
① 编写store模块，创建src\store\index.js文件。
② 在src\main.js文件中导入并挂载store模块。
Vuex****计数器案例
要求使用Vuex实现计数器案例：
计数器初始页面中定义2个初始数字0和100，定义"+"和"-"2个按钮。每次单击"+"按钮，数字从0自增1；每次单击"-"按钮，数字会从100自减1。
计数器初始页面效果如下图所示。
在计数器初始页面中单击"+"按钮，数字从0变为1，效果如下图所示。
在计数器初始页面中单击"-"按钮，数字从100变为99，效果如下图所示。
讲解计数器案例的实现
Pinia
Pinia****概述
Pinia是新一代的轻量级状态管理库，它允许跨组件或页面共享状态，解决了多组件间的数据通信，使数据操作更加简洁。
Pinia与Vuex相比，主要优点如下。
- Pinia支持Vue 2和Vue 3，支持选项式API和组合式API写法。
- Pinia简化了状态管理库的使用方法，抛弃了mutations，只有state、getters和actions，让代码编写更容易也更直观。
- Pinia不需要嵌套模板，符合Vue 3中的组合式API，让代码更加扁平化。
- Pinia提供了完整的TypeScript支持。
- Pinia分模块不需要借助modules，使代码更加简洁，可以实现良好的代码自动分隔。
- Pinia支持Devtools调试工具，便于进行调试。
- Pinia体积更小，性能更好。
- Pinia支持在某个组件中直接修改Pinia的state中的数据。
- Pinia支持服务端器渲染。
安装****Pinia
使用npm或yarn包管理工具安装Pinia。
# 使用yarn包管理器安装
yarn add pinia --save
# 使用npm包管理器安装
npm install pinia --save
在Vue3项目中使用yarn安装Pinia
使用****Pinia
在项目中使用Pinia时，通常先在项目中创建一个store模块，然后创建并挂载Pinia实例。其中，store模块是用于管理状态数据的仓库。
① 编写store模块，创建src\store\index.js文件。
② 在src\main.js文件中创建并挂载Pinia实例。
Pinia****计数器案例
要求使用Pinia实现计数器案例：
计数器初始页面定义了2个初始数字0和100，定义了"+"和"-"2个按钮。每次单击"+"按钮，数字从0自增1；每次单击"-"按钮，数字会从100自减1。
计数器初始页面效果如下图所示。
在计数器初始页面中单击"+"按钮，其后数字从0变为1，效果如下图所示。
在计数器初始页面中单击"-"按钮，其后数字从100变为99，效果如下图所示。
讲解计数器案例的实现
Pinia****模块化
在复杂的大型项目中，如果将多个模块的数据都定义到一个store对象中，那么store对象将变得非常大且难以管理，此时，可以使用Pinia直接定义多个模块，Pinia不需要像Vuex一样使用modules模块，它可以在src\store目录中直接定义对应模块，一个.js文件为一个模块。
在src\store目录下，新建user.js和shop.js文件作为两个模块，其中，user.js文件用于保存用户信息数据，shop.js文件用于保存商品信息数据。
讲解user.js和shop.js模块的创建
讲解user.js和shop.js模块的创建
Pinia****持久化存储
在项目开发中，使用Pinia进行状态管理时，若想要刷新浏览器后，仍保留之前的操作状态，可以通过Pinia的持久化插件pinia-plugin-persist实现。
使用npm或yarn包管理工具安装pinia-plugin-persist。
# 使用npm包管理工具安装
npm install pinia-plugin-persist --save
# 使用yarn包管理工具安装
yarn add pinia-plugin-persist --save
在my-pinia项目中安装pinia**-plugin-persist**
1. 全部数据持久化存储
下面以my-pinia项目为例，演示如何使用Pinia实现全部数据持久化存储。当用户单击"增加年龄"按钮时，年龄值将会改变，此时关闭浏览器或刷新页面后，要求页面显示最新修改的年龄值。
使用Pinia实现全部数据持久化存储
全部数据持久化存储的初始页面效果、单击2次"增加年龄"按钮后的页面效果如下图所示。
注意：单击2次"增加年龄"按钮后，会发现年龄值变为了20，此时刷新页面后，年龄值仍为20，表明已实现数据的持久化存储。
2. 部分数据持久化存储
下面以my-pinia项目为例，演示如何使用Pinia实现部分数据持久化存储。在页面中新增一个"改变姓名"按钮，当用户单击"增加年龄"按钮时，年龄值将会改变；当用户单击"改变姓名"按钮时，姓名值将会改变。当关闭浏览器或刷新页面后，要求页面显示最新修改的年龄值，而不保存最新修改的姓名值。
使用Pinia实现部分数据****持久化存储
打开开发者工具，在控制台面板中执行localStorage.clear()清除localStorage数据，清除后关闭开发者工具并刷新页面，部分数据持久化存储的初始页面效果如下图所示。
单击"增加年龄"按钮，年龄从18变为19；单击"改变姓名"按钮，姓名会从"小明"变为"小亮"，年龄改变的效果、姓名改变的效果如下图所示。
刷新页面后的页面效果如下图所示。
注意：页面中显示的年龄为19，姓名为小明，说明成功实现了年龄数据的持久化存储效果。
本章小结
本章对Axios、Vuex和Pinia的相关内容进行了详细介绍。首先介绍了Axios的概念、安装和使用方法，并使用Axios实现了图书列表案例；然后介绍了Vuex的概念、安装和使用，并使用Vuex实现了计数器案例；最后介绍了Pinia的概念、安装和使用方法，并使用Pinia实现了计数器案例、模块化和持久化存储。通过本章的学习，读者能够将所学技术运用到实际项目开发中。