第7章 网络请求和状态管理

一、Axios

1 Axios概述

               Axios是一个基于Promise的HTTP库，可以发送get、post等请求，它作用于浏览器和Node.js中。当运行在浏览器时，使用XMLHttpRequest接口发送请求；当运行在Node.js时，使用HTTP对象发送请求。

Axios的主要特性如下：

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

2 安装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>

2. 使用包管理工具安装

使用npm或yarn包管理工具安装Axios。

# 使用npm包管理工具安装
npm install axios --save
# 使用yarn包管理工具安装
yarn add axios --save

在Vue 3项目中使用yarn安装Axios

步骤一：

      打开命令提示符，切换到D:\vue\chapter07目录，使用yarn创建一个名称为my-axios的项目。

     在命令提示符中，切换到my-axios目录，为项目安装所有依赖。

cd my-axios
yarn

步骤二：

             在my-axios目录下使用yarn安装Axios。

步骤三：

使用VS Code编辑器打开my-axios目录，执行命令启动服务。

yarn dev

项目启动后，会默认开启一个本地服务，地址为http://127.0.0.1:5173/。

3 使用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)
})

4 Axios图书列表案例

使用Axios实现图书列表案例，图书列表页面初始效果如下图所示。

单击上图中“请求数据”按钮，数据请求成功页面效果如下图所示。

图书列表案例的实现分为以下2步。

使用mockjs模拟后端接口

步骤一：

在my-axios目录下，使用yarn安装mockjs。

yarn add mockjs@1.1.0 --save

步骤二：

创建src\mock\books.json文件，该文件用于存放模拟的数据。

  {"id": 1,"name": "西游记","author": "吴承恩"},{"id": 2,"name": "红楼梦","author": "曹雪芹"},{"id": 3,"name": "三国演义","author": "罗贯中"},{"id": 4,"name": "水浒传","author": "施耐庵"}
]

步骤三：

创建src\mock\mockServer.js文件，该文件用于配置模拟数据的相关信息。

import Mock from 'mockjs'
import books from './books.json'
Mock.mock('/mock/getBooks', 'get', {code: 200,	// 请求成功的状态码data: books	// 模拟的请求数据
})

步骤三：

修改src\main.js文件，在创建Vue应用实例前导入mockServer.js文件。

import './mock/mockServer.js'

在页面中请求接口并获取数据

步骤一：

清空src\App.vue文件中的内容。

<template><div class="box"><button>请求数据</button><table width="90%" class="table"><caption><h2>图书列表</h2></caption><thead><tr><th>编号</th><th>书名</th><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: 0 auto;text-align: center;}
table td, table th {border: 1px solid #cad9ea;color: #666;height: 30px;
}
table thead th {background-color: #CCE8EB;width: 100px;
}
table tr:nth-child(odd) {background: #fff;
}
table tr:nth-child(even) {background: #F5FAFA;
}
</style>

步骤三：

为“请求数据”按钮绑定单击事件处理方法。

<button @click="getData">请求数据</button>

步骤四：

在src\App.vue文件中请求接口数据。

<script setup>
import { reactive } from 'vue'
import request from './axios/request.js'
const bookData = reactive({list: []
})
// 测试请求方法
const getData = function() {request({url: '/mock/getBooks',method: 'get'}).then(res => {bookData.list = res.data.dataconsole.log(res.data.data)}).catch(error => {console.log(error)})
}
</script>

步骤五：

在src\App.vue文件中编写主体内容。

<tbody v-for="item in bookData.list" :key="item.id"><!-- 主体内容 --><tr><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.author }}</td></tr>
</tbody>

二、Vuex

1 Vuex概述

              Vuex是一个专为Vue开发的状态管理库，它采用集中式存储的方式管理应用的所有组件的状态，解决了多组件数据通信的问题，使数据操作更加简洁。

2 安装Vuex

               Vuex的安装方式主要有两种，一种是通过标签引入，另一种是使用包管理工具安装。

通过标签引入：

              使用 Unpkg 的 CDN 服务提供的Vuex文件，也可以将Vuex文件下载至本地再引入。

使用包管理工具安装：

              使用 npm 或 yarn 包管理工具安装Vuex。

1. 通过标签引入

使用 Unpkg 的CDN服务引入 Vuex 。

<script src="https://unpkg.com/vuex@next"></script>

2. 使用包管理工具安装

使用 npm 或 yarn 包管理工具安装 Vuex 。

# 使用npm包管理工具安装
npm install vuex --save
# 使用yarn包管理工具安装
yarn add vuex --save

在Vue 3项目中使用yarn安装Vuex

步骤一：

            打开命令提示符，切换到D:\vue\chapter07目录，使用 yarn 创建一个名称为 my-vuex 的项目。

在命令提示符中，切换到my-vuex目录，为项目安装所有依赖。

cd my-vuex
yarn

步骤二：

在my-vuex目录下使用yarn安装 Vuex 。

步骤三：

使用VS Code编辑器打开my-vuex目录，执行命令启动服务。

yarn dev

项目启动后，会默认开启一个本地服务，地址为http://127.0.0.1:5173/。

3 使用Vuex

                在项目中使用Vuex时，通常的做法是先在项目中创建一个store模块，然后导入并挂载store模块。store模块是用于管理状态数据的仓库。

② 在src\main.js文件中导入并挂载store模块。

import { createApp } from 'vue'
import './style.css'
import store from './store'	// 导入store模块
import App from './App.vue'
const app = createApp(App)
app.use(store) 			// 挂载store模块
app.mount('#app')

4 Vuex计数器案例

讲解计数器案例的实现

步骤一：

清空src\App.vue文件中的内容，重新编写如下代码。

<template><p>每次增加1：<button @click="increment">+</button>数字：0</p><p>每次减少1：<button @click="reduction">-</button>数字：100</p>
</template>
<script setup>
const increment = () => { }
const reduction = () => { }
</script>
<style>
button {background-color: aquamarine;
}
</style>

步骤二：

创建src\store\index.js文件。

import { createStore } from 'vuex'
const store = createStore({state: {add: 0,reduce: 100},mutations: {increase(state) {state.add++},
decrease(state) {state.reduce--}},actions: {},modules: {} 
})
export default store

步骤三：

修改src\App.vue文件，提交increase()方法和decrease()方法。

<script setup>
import { useStore } from 'vuex'
const store = useStore()
const increment = () => {store.commit('increase')
}
const reduction = () => {store.commit('decrease')
}
</script>

步骤四：

在<template>模板中获取state中的数据并显示在页面中。

<p>每次增加1：<button @click="increment">+</button>数字：{{ this.$store.state.add }}
</p>
<p>每次减少1：<button @click="decrement">-</button>数字：{{ this.$store.state.reduce }}
</p>

三、Pinia

1 Pinia概述

               Pinia是新一代的轻量级状态管理库，它允许跨组件或页面共享状态，解决了多组件间的数据通信，使数据操作更加简洁。

2 安装Pinia

使用 npm 或 yarn 包管理工具安装 Pinia 。

# 使用yarn包管理器安装
yarn add pinia --save
# 使用npm包管理器安装
npm install pinia --save

在Vue 3项目中使用yarn安装Pinia

步骤一：

打开命令提示符，切换到D:\vue\chapter07目录，使用yarn创建一个名称为my-pinia的项目。

在命令提示符中，切换到my-pinia目录，为项目安装所有依赖。

cd my-pinia
yarn

步骤二：

在my-pinia目录下使用yarn安装Pinia。

步骤三：

使用VS Code编辑器打开my-pinia目录，执行命令启动服务。

yarn dev

项目启动后，会默认开启一个本地服务，地址为http://127.0.0.1:5173/。

3 使用Pinia

            在项目中使用Pinia时，通常先在项目中创建一个store模块，然后创建并挂载Pinia实例。其中，store模块是用于管理状态数据的仓库。

① 编写store模块，创建src\store\index.js文件。

② 在src\main.js文件中创建并挂载Pinia实例。

import { createApp } from 'vue'
import './style.css'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
const pinia = createPinia()		// 创建Pinia实例
app.use(pinia)				// 导入Pinia实例
app.mount('#app')

4 Pinia计数器案例

讲解计数器案例的实现

步骤一：

清空src\App.vue文件中的内容，重新编写如下代码。

<template><p>每次增加1：<button @click="increment">+</button>数字：0</p><p>每次减少1：<button @click="reduction">-</button>数字：100</p>
</template>
<script setup>
const increment = () => { }
const reduction = () => { }
</script>
<style>
button {background-color: aquamarine;
}
</style>

步骤二：

创建src\store\index.js文件。

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {state: () => {return {add: 0,reduce: 100}},
getters: {},actions: {increase() {this.add++},decrease() {this.reduce--}}
})

步骤三：

修改src\App.vue文件，调用actions中定义的increase()方法和decrease()方法。

<script setup>
import { useStore } from './store'
import { storeToRefs } from 'pinia'
const store = useStore()
const { add, reduce } = storeToRefs(store)
const increment = () => {store.increase()
}
const reduction = () => {store.decrease()
}
</script>

步骤四：

<p>每次增加1：<button @click="increment">+</button>数字：{{ add }}
</p>
<p>每次减少1：<button @click="reduction">-</button>数字：{{ reduce }}
</p>

5 Pinia模块化

Pinia模块化应用场景？

讲解user.js和shop.js模块的创建

步骤一：

创建src\store\user.js文件，编写用户信息数据。

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {state: () => {return {name: '小明',sex: '男',age: 18}},getters: {},actions: {}
})

步骤二：

创建src\store\shop.js文件，编写商品信息数据。

import { defineStore } from 'pinia'
export const useShopStore = defineStore('shop', {state: () => {return {list: [{id: '01',name: '手机',price: 2000},{id: '02',name: '音响',price: 5000}]}},getters: {},actions: {}
})
getters: {},actions: {increase() {this.add++},decrease() {this.reduce--}}
})

步骤三：

创建src\components\User.vue文件，在页面中显示用户信息数据。

<template><div>user模块：<p>姓名：{{ name }}</p><p>性别：{{ sex }}</p><p>年龄：{{ age }}</p></div>
</template>
<script setup>
import { useUserStore } from '../store/user.js'
import { storeToRefs } from 'pinia'
const user = useUserStore()
const { name, sex, age } = storeToRefs(user)
</script>

步骤四：

修改src\main.js文件，切换页面中显示的组件。

import App from './components/User.vue'

保存上述代码，在浏览器中访问http://127.0.0.1:5173/，user模块的页面效果如下图所示。

步骤五：

创建src\components\Shop.vue文件，在页面中显示商品信息数据。

<template>shop模块：<div v-for="item in list"><p>商品id：{{ item.id }}</p><p>商品名称：{{ item.name }}</p><p>商品价格：{{ item.price }}元</p></div>
</template>
<script setup>
import { useShopStore } from '../store/shop.js'
import { storeToRefs } from 'pinia'
const shop = useShopStore()
const { list } = storeToRefs(shop)
</script>

步骤六：

修改src\main.js文件，切换页面中显示的组件。

import App from './components/Shop.vue'

保存上述代码，在浏览器中访问http://127.0.0.1:5173/，shop模块的页面效果如下图所示。

6 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

步骤一：

在my-pinia目录下使用yarn安装pinia-plugin-persist插件。

步骤二：

使用VS Code编辑器打开my-pinia目录，执行命令启动服务。

yarn dev

在src\main.js文件中导入并挂载pinia-plugin-persist插件。

import { createApp } from 'vue'
import './style.css'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
import App from './components/Shop.vue'
const pinia = createPinia()
pinia.use(piniaPluginPersist)
const app = createApp(App)
app.use(pinia)
app.mount('#app')

挂载pinia-plugin-persist插件后，在模块中实现持久化存储的示例代码如下。

persist: {enabled: true,		// 开启数据缓存strategies: [{key: 'StoreId1',		// 当前store的idstorage: localStorage, 	// 存储方式paths: ['字段']		// 指定要持久化的字段}
]
}{key: 'user',storage: localStorage}]
}

1. 全部数据持久化存储 

使用Pinia实现全部数据持久化存储

步骤一：

在src\components\User.vue文件中定义“增加年龄”按钮。

<template><div>user模块：<p>姓名：{{ name }}</p><p>性别：{{ sex }}</p><p>年龄：{{ age }}</p><button @click="changeAge">增加年龄</button></div>
</template>

步骤二：

修改src\store\user.js文件，在actions中定义一个改变年龄的方法，并实现持久化存储。

actions: {changeAge() {this.age++},
},
persist: {enabled: true,strategies: [{key: 'user',storage: localStorage}]
}

步骤三：

在src\components\User.vue文件中定义changeAge()方法，在该方法中调用actions中定义的changeAge()方法。

const changeAge = () => {user.changeAge()
}

步骤四：

修改src\main.js文件，切换页面中显示的组件。

import App from './components/User.vue'

2. 部分数据持久化存储

使用Pinia实现部分数据持久化存储

步骤一：

修改src\store\user.js文件，在actions中定义一个改变姓名的方法。

changeName() {this.name = '小亮'
}

步骤二：

修改src\store\user.js文件中持久化存储的代码，通过paths指定要持久化存储的字段。

persist: {enabled: true,strategies: [{key: 'user',storage: localStorage,paths: ['age']}],
}

步骤三：

在src\components\User.vue文件中找到“增加年龄”按钮，在该按钮下方增加一个“改变姓名”按钮。

<button @click="changeName">改变姓名</button>

步骤四：

修改src\components\User.vue文件，定义changeName()方法，在该方法中调用actions中定义的changeName()方法。

const changeName = () => {user.changeName()
}