当前位置：首页 > article >正文

vue.js【网络请求和状态管理】

article 2024/10/21 3:32:42

章节概述/ 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

在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。

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

在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，效果如下图所示。

讲解计数器案例的实现

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

在Vue 3项目中使用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模块的创建

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实现了计数器案例、模块化和持久化存储。通过本章的学习，读者能够将所学技术运用到实际项目开发中。