Vue.js前端开发实战（第2版） 课件 第7章 网络请求和状态管理.pptx

第7章网络请求和状态管理;学习目标/Target;学习目标/Target;学习目标/Target;章节概述/Summary;目录/Contents;Axios;;什么是Axios？;;7.1.1Axios概述;;;7.1.2安装Axios;7.1.2安装Axios;在Vue3项目中使用yarn安装Axios;在Vue3项目中使用yarn安装Axios;在my-axios目录下使用yarn安装Axios。;使用VSCode编辑器打开my-axios目录，执行命令启动服务。;;Axios安装完成后，如何使用呢？;;7.1.3使用Axios;7.1.3使用Axios;;7.1.4Axios图书列表案例;7.1.4Axios图书列表案例;图书列表案例的实现分为以下2步。;;;;;;;;;;;;;;;;;Vuex;;什么是Vuex？;;如何理解Vue中的单向数据流机制？

在Vue中，组件的状态变化是通过单向数据流的设计理念实现的，单向数据流是指只能从一个方向修改状态，主要包含以下3个部分。

状态（State）：驱动应用的数据源。

视图（View）：以声明方式将状态映射到视图。

操作（Actions）：响应在视图上的用户输入导致的状态变化。;Vuex的工作流程如下图所示。;;;使用Unpkg的CDN服务引入Vuex。;使用npm或yarn包管理工具安装Vuex。;在Vue3项目中使用yarn安装Vuex;在Vue3项目中使用yarn安装Vuex;在my-vuex目录下使用yarn安装Vuex。;使用VSCode编辑器打开my-vuex目录，执行命令启动服务。;;Vuex安装完成后，如何使用呢？;;①编写store模块，创建src\store\index.js文件。;import{createApp}fromvue

import./style.css

importstorefrom./store //导入store模块

importAppfrom./App.vue

constapp=createApp(App)

app.use(store) //挂载store模块

app.mount(#app);;;计数器初始页面效果如下图所示。;在计数器初始页面中单击“+”按钮，数字从0变为1，效果如下图所示。;7.2.4Vuex计数器案例;;;;;;;Pinia;;什么是Pinia？;;Pinia与Vuex相比，主要优点如下。

Pinia支持Vue2和Vue3，支持选项式API和组合式API写法。

Pinia简化了状态管理库的使用方法，抛弃了mutations，只有state、getters和actions，让代码编写更容易也更直观。

Pinia不需要嵌套模板，符合Vue3中的组合式API，让代码更加扁平化。

Pinia提供了完整的TypeScript支持。

Pinia分模块不需要借助modules，使代码更加简洁，可以实现良好的代码自动分隔。

Pinia支持Devtools调试工具，便于进行调试。

Pinia体积更小，性能更好。

Pinia支持在某个组件中直接修改Pinia的state中的数据。

Pinia支持服务端器渲染。;;使用npm或yarn包管理工具安装Pinia。;在Vue3项目中使用yarn安装Pinia;在Vue3项目中使用yarn安装Pinia;在my-pinia目录下使用yarn安装Pinia。;使用VSCode编辑器打开my-pinia目录，执行命令启动服务。;;Pinia安装完成后，如何使用呢？;;①编写store模块，创建src\store\index.js文件。;import{createApp}fromvue

import./style.css

import{createPinia}frompinia

importAppfrom./App.vue

constapp=createApp(App)

constpinia=createPinia() //创建Pinia实例

app.use(pinia) //导入Pinia实例

app.mount(#app);;;计数器初始页面效果如下图所示。;在计数器初始页面中单击“+”按钮，其后数字从0变为1，效果如下图所示。;在计数器初始页面中单击“-”按钮，其后数字从100变为99，效果如下图所示。;;;;;;;;Pinia模块化应用场景？;7.3.5Pinia模块化;;;;;;;;;;;;;7.3.6Pinia持久化存储;在my-pinia项目中安装pinia-plugin-persist;;在src\main.js文