章节概述/ 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。
- 通过标签引入
① 使用Unpkg的CDN服务引入Axios。
② 使用jsDelivr的CDN服务引入Axios。
注意：读者也可以从Axios官方网站中直接下载Axios，下载后再将文件引入网页。因为需要将文件下载到本地，所以不需要考虑无网络的情况。
- 使用包管理工具安装
使用npm或yarn包管理工具安装Axios。
使用npm包管理工具安装
npm install axios --save
使用yarn包管理工具安装
yarn add axios --save
在Vue 3项目中使用yarn安装Axios
使用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。
- 通过标签引入
使用Unpkg的CDN服务引入Vuex。
注意：读者也可以从Vuex官方网站直接下载Vuex，下载后再将文件引入网页。
- 使用包管理工具安装
使用npm或yarn包管理工具安装Vuex。
使用npm包管理工具安装
npm install vuex --save
使用yarn包管理工具安装
yarn add vuex --save
在Vue 3项目中使用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，效果如下图所示。
讲解计数器案例的实现
