《前端开发框架》课件-第7章 网络请求和状态管理

7.1.2

安装Axios先定一个小目标！掌握Axios的安装方法，能够在项目中安装Axios7.1.2

安装AxiosAxios的安装方式主要有两种，一种是通过标签引入，另一种是使用包管理工具安装。通过标签引入使用包管理工具安装使用Unpkg或jsDelivr的内容分发网络服务提供的Axios文件，也可以将Axios文件下载至本地再引入。使用npm或yarn包管理工具安装Axios。7.1.2

安装Axios1.通过标签引入①使用Unpkg的CDN服务引入Axios。<scriptsrc="/axios/dist/axios.min.js"></script>②使用jsDelivr的CDN服务引入Axios。<scriptsrc="/npm/axios/dist/axios.min.js"></script>注意7.1.2

安装Axios2.使用包管理工具安装使用npm或yarn包管理工具安装Axios。#使用npm包管理工具安装npminstallaxios--save#使用yarn包管理工具安装yarnaddaxios--save7.1.2

安装Axios在Vue

3项目中使用yarn安装Axios打开命令提示符，切换到D:\vue\chapter07目录，使用yarn创建一个名称为my-axios的项目。步骤1yarncreatevite--templatevue项目名称步骤2步骤37.1.2

安装Axios在Vue

3项目中使用yarn安装Axios在命令提示符中，切换到my-axios目录，为项目安装所有依赖。步骤1cdmy-axiosyarn步骤2步骤37.1.2

安装Axios在Vue

3项目中使用yarn安装Axios在my-axios目录下使用yarn安装Axios。步骤1yarnaddaxios--步骤2步骤3项目运行时依赖@1.2.1表示安装Axios的版本号7.1.2

安装Axios在Vue

3项目中使用yarn安装Axios使用VSCode编辑器打开my-axios目录，执行命令启动服务。yarndev步骤1步骤2步骤3项目启动后，会默认开启一个本地服务，地址为:5173/。7.1.3

使用Axios先定一个小目标！掌握Axios的使用方法，能够在项目中使用Axios7.1.3

使用AxiosAxios安装完成后，如何使用呢？7.1.3

使用Axios在项目中使用Axios时，通常的做法是先将Axios封装成一个模块，然后在组件中导入模块。7.1.3

使用Axios①将Axios封装成模块，创建src\axios\request.js文件。import

axiosfrom'axios'constrequest=axios.create({timeout:2000})export

defaultrequest②在组件中导入模块，在src\App.vue文件中导入模块。import

requestfrom'./axios/request.js'7.1.3

使用AxiosAxios常用的请求方式：get请求和post请求。①使用Axios发送get请求的基本语法格式。②使用Axios发送post请求的基本语法格式。request({request({url:'请求路径',method:'get',params:{参数}}).then(res=>{console.log(res)}).catch(error=>{console.log(error)})url:'请求路径',method:'post',data:{参数}}).then(res=>{console.log(res)}).catch(error=>{console.log(error)})7.1.4

Axios图书列表案例先定一个小目标！掌握Axios图书列表案例的实现，能够使用Axios完成网络请求7.1.4

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

Axios图书列表案例单击上图中“请求数据”按钮，数据请求成功页面效果如下图所示。7.1.4

Axios图书列表案例图书列表案例的实现分为以下2步。模拟数据请求数据127.1.4

Axios图书列表案例模拟数据：为了方便演示，使用mockjs模拟后端接口，下面讲解如何安装mockjs，以及编写模拟数据和配置模拟数据的相关信息。7.1.4

Axios图书列表案例使用mockjs模拟后端接口在my-axios目录下，使用yarn安装mockjs。步骤1步骤2yarnaddmockjs@1.1.0--save步骤3步骤47.1.4

Axios图书列表案例使用mockjs模拟后端接口创建src\mock\books.json文件，该文件用于存放模拟的数据。步骤1步骤2[{"id":1,"name":

"西游记",步骤3步骤4"author":"吴承恩"},{"id":2,"name":

"红楼梦","author":"曹雪芹"},7.1.4

Axios图书列表案例使用mockjs模拟后端接口>>接上页代码步骤1{"id":3,步骤2步骤3步骤4"name":

"三国演义","author":"罗贯中"},{"id":4,"name":

"水浒传","author":"施耐庵"}]7.1.4

Axios图书列表案例使用mockjs模拟后端接口创建src\mock\mockSer

ver.js文件，该文件用于配置模拟数据的相关信息。步骤1步骤2importMockfrom

'mockjs'importbooksfrom

'./books.json'Mock.mock('/mock/getBooks','get',{code:200,//请求成功的状态码//模拟的请求数据步骤3步骤4data:books})7.1.4

Axios图书列表案例使用mockjs模拟后端接口修改src\main.js文件，在创建Vue应用实例前导入mockSer

ver.js文件。步骤1步骤2import'./mock/mockServer.js'步骤3步骤47.1.4

Axios图书列表案例请求数据：后端接口和模拟数据准备好之后，就可以请求接口、获取数据了。下面讲解如何在页面中请求接口并获取数据。7.1.4

Axios图书列表案例在页面中请求接口并获取数据清空src\App.vue文件中的内容。步骤1步骤2<template><divclass="box"><button>请求数据</button><tablewidth="90%"class="table"><caption>步骤3<h2>图书列表</h2></caption>步骤4步骤5<thead><tr><th>编号</th><th>书名</th>7.1.4

Axios图书列表案例在页面中请求接口并获取数据>>接上页代码步骤1步骤2<th>作者</th></tr></thead><tbody>步骤3<!--主体内容--></tbody>步骤4步骤5</table></div></template>7.1.4

Axios图书列表案例在页面中请求接口并获取数据在src\App.vue文件中编写样式代码。步骤1步骤2<style>body,

html{width:100%;height:100%;}步骤3#app{width:100%!important;}步骤4步骤5table{border-collapse:

collapse;margin:0auto;text-align:

center;7.1.4

Axios图书列表案例在页面中请求接口并获取数据>>接上页代码步骤1步骤2}tabletd,

tableth{border:1px

solid#cad9ea;color:

#666;height:30px;步骤3}tabletheadth{background-color:#CCE8EB;width:100px;}步骤4步骤57.1.4

Axios图书列表案例在页面中请求接口并获取数据>>接上页代码步骤1步骤2tabletr:nth-child(odd){background:

#fff;}tabletr:nth-child(even){步骤3background:

#F5FAFA

;}步骤4步骤5</style>7.1.4

Axios图书列表案例在页面中请求接口并获取数据为“请求数据”按钮绑定单击事件处理方法。步骤1步骤2<button@click="getData">请求数据</button>步骤3步骤4步骤57.1.4

Axios图书列表案例在页面中请求接口并获取数据在src\App.vue文件中请求接口数据。步骤1步骤2<scriptsetup>import{reactive

}from

'vue'importrequestfrom

'./axios/request.js'constbookData=reactive({步骤3list:[]})步骤4步骤5//测试请求方法7.1.4

Axios图书列表案例在页面中请求接口并获取数据>>接上页代码步骤1步骤2constgetData=function(){request({url:'/mock/getBooks',method:'get'}).then(res=>{步骤3bookData.list=res.data.dataconsole.log(res.data.data)}).catch(error=>{console.log(error)})步骤4步骤5}</script>7.1.4

Axios图书列表案例在页面中请求接口并获取数据在src\App.vue文件中编写主体内容。步骤1步骤2<tbodyv-for="iteminbookData.list":key="item.id"><!--主体内容--><tr>步骤3<td>{{item.id}}</td><td>{{}}</td><td>{{item.author}}</td></tr>步骤4步骤5</tbody>7.2.2

安装Vuex先定一个小目标！掌握Vuex的安装方法，能够在项目中安装Vuex7.2.2

安装VuexVuex的安装方式主要有两种，一种是通过标签引入，另一种是使用包管理工具安装。通过标签引入使用包管理工具安装使用Unpkg的CDN服务提供的Vuex文件，也可以将Vuex文件下载至本地再引入。使用npm或yarn包管理工具安装Vuex。7.2.2

安装Vuex1.通过标签引入使用Unpkg的CDN服务引入Vuex。<scriptsrc="/vuex@next"></script>注意7.2.2

安装Vuex2.使用包管理工具安装使用npm或yarn包管理工具安装Vuex。#使用npm包管理工具安装npminstallvuex--save#使用yarn包管理工具安装yarnaddvuex--save7.2.2

安装Vuex在Vue

3项目中使用yarn安装Vuex打开命令提示符，切换到D:\vue\chapter07目录，使用yarn创建一个名称为my-vuex的项目。步骤1yarncreatevite--templatevue项目名称步骤2步骤37.2.2

安装Vuex在Vue

3项目中使用yarn安装Vuex在命令提示符中，切换到my-vuex目录，为项目安装所有依赖。步骤1cdmy-vuexyarn步骤2步骤37.2.2

安装Vuex在Vue

3项目中使用yarn安装Vuex在my-vuex目录下使用yarn安装Vuex。步骤1yarnaddvuex--步骤2步骤3项目运行时依赖@4.0.2表示安装Vuex的版本号7.2.2

安装Vuex在Vue

3项目中使用yarn安装Vuex使用VSCode编辑器打开my-vuex目录，执行命令启动服务。步骤1yarndev步骤2步骤3项目启动后，会默认开启一个本地服务，地址为:5173/。7.2.4

Vuex计数器案例先定一个小目标！掌握Vuex计数器案例的实现，能够运用Vuex完成计数器效果7.2.4

Vuex计数器案例要求使用Vuex实现计数器案例：计数器初始页面中定义2个初始数字0和100，定义“+”和“-”2个按钮。每次单击“+”按钮，数字从0自增1；每次单击“-”按钮，数字会从100自减1。7.2.4

Vuex计数器案例计数器初始页面效果如下图所示。7.2.4

Vuex计数器案例在计数器初始页面中单击“+”按钮，数字从0变为1，效果如下图所示。7.2.4

Vuex计数器案例在计数器初始页面中单击“-”按钮，数字从100变为99，效果如下图所示。7.2.4

Vuex计数器案例讲解计数器案例的实现清空src\App.vue文件中的内容，重新编写如下代码。步骤1步骤2<template><p>每次增加1：<button@click="increment">+</button>数字：0步骤3步骤4</p><p>每次减少1：<button@click="reduction">-</button>数字：100</p></template>7.2.4

Vuex计数器案例讲解计数器案例的实现>>接上页代码步骤1步骤2<scriptsetup>constincrement=()=>{}constreduction=()=>{}</script>步骤3步骤4<style>button{background-color:aquamarine;}</style>7.2.4

Vuex计数器案例讲解计数器案例的实现创建src\store\index.js文件。步骤1步骤2import{createStore

}from

'vuex'conststore

=createStore({state:{add:0,步骤3步骤4reduce:100},mutations:{increase(state){state.add++},7.2.4

Vuex计数器案例讲解计数器案例的实现>>接上页代码步骤1步骤2decrease(state){state.reduce--}},步骤3步骤4actions:{},modules:{}})exportdefaultstore7.2.4

Vuex计数器案例讲解计数器案例的实现修改src\App.vue文件，提交increase()方法和decrease()方法。步骤1步骤2<scriptsetup>import{useStore

}from

'vuex'conststore

=useStore()constincrement=()=>{mit('increase')}步骤3步骤4constreduction=()=>{mit('decrease')}</script>7.2.4

Vuex计数器案例讲解计数器案例的实现在<template>模板中获取state中的数据并显示在页面中。步骤1步骤2<p>每次增加1：<button@click="increment">+</button>数字：{{this.$store.state.add}}</p>步骤3步骤4<p>每次减少1：<button@click="decrement">-</button>数字：{{this.$store.state.reduce}}</p>7.3.4

Pinia计数器案例先定一个小目标！掌握Pinia计数器案例的实现，能够运用Pinia完成计数器效果7.3.4

Pinia计数器案例要求使用Pinia实现计数器案例：计数器初始页面定义了2个初始数字0和100，定义了“+”和“-”2个按钮。每次单击“+”按钮，数字从0自增1；每次单击“-”按钮，数字会从100自减1。7.3.4

Pinia计数器案例计数器初始页面效果如下图所示。7.3.4

Pinia计数器案例在计数器初始页面中单击“+”按钮，其后数字从0变为1，效果如下图所示。7.3.4

Pinia计数器案例在计数器初始页面中单击“-”按钮，其后数字从100变为99，效果如下图所示。7.3.4

Pinia计数器案例讲解计数器案例的实现清空src\App.vue文件中的内容，重新编写如下代码。步骤1步骤2<template><p>每次增加1：<button@click="increment">+</button>数字：0步骤3步骤4</p><p>每次减少1：<button@click="reduction">-</button>数字：100</p></template>7.3.4

Pinia计数器案例讲解计数器案例的实现>>接上页代码步骤1步骤2<scriptsetup>constincrement=()=>{}constreduction=()=>{}</script>步骤3步骤4<style>button{background-color:aquamarine;}</style>7.3.4

Pinia计数器案例讲解计数器案例的实现创建src\store\index.js文件。步骤1步骤2import{defineStore

}from

'pinia'exportconstuseStore

=defineStore('storeId',{state:()=>{return{步骤3步骤4add:0,reduce:100}},7.3.4

Pinia计数器案例讲解计数器案例的实现>>接上页代码步骤1步骤2getters:{},actions:{increase(){this.add++步骤3步骤4},decrease(){this.reduce--}}})7.3.4

Pinia计数器案例讲解计数器案例的实现修改src\App.vue文件，调用actions中定义的increase()方法和decrease()步骤1步骤2方法。<scriptsetup>import{useStore

}from'./store'import{storeToRefs

}from'pinia'conststore

=useStore()const{add,reduce}=storeToRefs(store)constincrement=()=>{store.increase()步骤3步骤4}constreduction=()=>{store.decrease()}</script>7.3.4

Pinia计数器案例讲解计数器案例的实现在<template>模板中输出state中的数据，显示在页面中。步骤1步骤2<p>每次增加1：<button@click="increment">+</button>数字：{{add}}</p>步骤3步骤4<p>每次减少1：<button@click="reduction">-</button>数字：{{reduce}}</p>7.3.5

Pinia模块化先定一个小目标！熟悉Pinia模块化，能够阐述Pinia模块化的实现原理7.3.5

Pinia模块化Pinia模块化应用场景？7.3.5

Pinia模块化在复杂的大型项目中，如果将多个模块的数据都定义到一个store对象中，那么store对象将变得非常大且难以管理，此时，可以使用Pinia直接定义多个模块，Pinia不需要像Vuex一样使用modules模块，它可以在src\store目录中直接定义对应模块，一个.js文件为一个模块。7.3.5

Pinia模块化在src\store目录下，新建user.js和shop.js文件作为两个模块，其中，user.js文件用于保存用户信息数据，shop.js文件用于保存商品信息数据。7.3.5

Pinia模块化讲解user.js和shop.js模块的创建创建src\store\user.js文件，编写用户信息数据。步骤1步骤2import{defineStore

}from

'pinia'exportconstuseUserStore

=defineStore('user',{state:()=>{return{name:'小明',sex:'男',age:18}步骤3步骤4步骤5步骤6},getters:{},actions:{}})7.3.5

Pinia模块化讲解user.js和shop.js模块的创建创建src\store\shop.js文件，编写商品信息数据。步骤1步骤2import{defineStore

}from

'pinia'exportconstuseShopStore

=defineStore('shop',{步骤3state:()=>{return{list:[步骤4步骤5步骤6{id:'01',name:'手机',price:2000},7.3.5

Pinia模块化讲解user.js和shop.js模块的创建>>接上页代码步骤1步骤2{id:'02',name:'音响',步骤3price:5000}]步骤4步骤5步骤6}},getters:{},actions:{}})7.3.5

Pinia模块化讲解user.js和shop.js模块的创建>>接上页代码步骤1步骤2getters:{},actions:{increase(){步骤3this.add++},decrease(){步骤4步骤5步骤6this.reduce--}}})7.3.5

Pinia模块化讲解user.js和shop.js模块的创建创建src\components\User.vue文件，在页面中显示用户信息数据。步骤1步骤2<template><div>user模块：<p>姓名：{{name}}</p><p>性别：{{sex}}</p><p>年龄：{{age}}</p></div>步骤3</template>步骤4步骤5步骤6<scriptsetup>import{useUserStore}from'../store/user.js'import{storeToRefs

}from'pinia'constuser=useUserStore()const{name,sex,age}=storeToRefs(user)</script>7.3.5

Pinia模块化讲解user.js和shop.js模块的创建修改src\main.js文件，切换页面中显示的组件。import

Appfrom'./components/User.vue'步骤1步骤2保存上述代码，在浏览器中访问:5173/，user模块的页面效果如下图所示。步骤3步骤4步骤5步骤67.3.5

Pinia模块化讲解user.js和shop.js模块的创建创建src\components\Shop.vue文件，在页面中显示商品信息数据。步骤1步骤2<template>shop模块：<divv-for="iteminlist"><p>商品id：{{item.id}}</p><p>商品名称：{{}}</p><p>商品价格：{{item.price}}元</p></div>步骤3步骤4步骤5步骤6</template>7.3.5

Pinia模块化讲解user.js和shop.js模块的创建>>接上页代码步骤1步骤2<scriptsetup>import{useShopStore

}from

'../store/shop.js'import{storeToRefs

}from

'pinia'constshop=useShopStore()const{list}=storeToRefs(shop)</script>步骤3步骤4步骤5步骤67.3.5

Pinia模块化讲解user.js和shop.js模块的创建修改src\main.js文件，切换页面中显示的组件。import

Appfrom'./components/Shop.vue'步骤1步骤2保存上述代码，在浏览器中访问:5173/，shop模块的页面效果如下图所示。步骤3步骤4步骤5步骤67.3.6

Pinia持久化存储先定一个小目标！掌握Pinia持久化存储，能够运用Pinia实现全部数据或部分数据的持久化存储7.3.6

Pinia持久化存储在项目开发中，使用Pinia进行状态管理时，若想要刷新浏览器后，仍保留之前的操作状态，可以通过Pinia的持久化插件pinia-plugin-persist实现。7.3.6

Pinia持久化存储使用npm或yarn包管理工具安装pinia-plugin-persist。#使用npm包管理工具安装npminstallpinia-plugin-persist--save#使用yarn包管理工具安装yarnaddpinia-plugin-persist--save7.3.6

Pinia持久化存储在my-pinia项目中安装pinia-plugin-persist在my-pinia目录下使用yarn安装pinia-plugin-persist插件。步骤1yarnaddpinia-plugin-persist--步骤2步骤3项目运行时依赖@1.0.0表示安装pinia-plugin-persist的版本号7.3.6

Pinia持久化存储在my-pinia项目中安装pinia-plugin-persist使用VSCode编辑器打开my-pinia目录，执行命令启动服务。yarndev步骤1步骤2步骤37.3.6

Pinia持久化存储在my-pinia项目中安装pinia-plugin-persist在src\main.js文件中导入并挂载pinia-plugin-persist插件。步骤1import{createApp}from

'vue'import'./style.css'import{createPinia}from

'pinia'importpiniaPluginPersistfrom

'pinia-plugin-persist'importAppfrom

'./components/Shop.vue'constpinia=createPinia()步骤2步骤3pinia.use(piniaPluginPersist)constapp=createApp(App)app.use(pinia)app.mount('#app')7.3.6

Pinia持久化存储在my-pinia项目中安装pinia-plugin-persist挂载pinia-plugin-persist插件后，在模块中实现持久化存储的示例代码如下。步骤1persist:{enabled:true,strategies:[{//开启数据缓存步骤2步骤3key:

'StoreId1',storage:localStorage,paths:['字段']}//当前store的id//存储方式//指定要持久化的字段]}7.3.6

Pinia持久化存储1.全部数据持久化存储下面以my-pinia项目为例，演示如何使用Pinia实现全部数据持久化存储。当用户单击“增加年龄”按钮时，年龄值将会改变，此时关闭浏览器或刷新页面后，要求页面显示最新修改的年龄值。7.3.6

Pinia持久化存储使用Pinia实现全部数据持久化存储在src\components\User.vue文件中定义“增加年龄”按钮。步骤1步骤2<template><div>user模块：<p>姓名：{{name}}</p><p>性别：{{sex}}</p><p>年龄：{{age}}</p><button@click="changeAge">增加年龄</button>步骤3步骤4</div></template>7.3.6

Pinia持久化存储使用Pinia实现全部数据持久化存储修改src\store\user.js文件，在actions中定义一个改变年龄的方法，并实现持久化存储。步骤1步骤2actions:{changeAge(){this.age++},步骤3步骤4},persist:{enabled:true,strategies:[7.3.6

Pinia持久化存储使用Pinia实现全部数据持久化存储>>接上页代码步骤1步骤2{key:

'user',storage:localStorage}步骤3步骤4]}7.3.6

Pinia持久化存储