Vue2笔记04 动画与过渡，跨域问题，插槽，Vuex

动画与过渡

动画

用法

name标签

区分不同transition标签

appear属性

让其在页面初始化就具有动画效果

过渡

用法

 

多个标签

集成第三方动画

安装

npm install animate.css

配置代理

安装axios

npm i axios

使用

跨域报错 

违背了同源策略，协议名，主机名，端口号不一致

解决跨域问题

方式一

代理服务器

在前端项目运行的位置(同主机，端口)开启代理服务器，由它去转发请求，服务器之间通信不受同源策略限制

开启代理服务器的方式：Nginx，vue-cli

vue-cli配置代理服务器

vue.config.js文件(参考vue-cli文档 devServer proxy配置)

重启脚手架，代理服务器运行在当前vue项目的8080端口了

更改axios请求中的主机名和端口号与代理服务器所在地址一致

成功

注意

1、此时如果8080端口public文件夹下有要访问的资源，就不会转发到目标服务器

2、这种方式只能配置一个代理（一个目标服务器）

方式二

插槽

默认插槽

具名插槽

多个标签可以用template包裹

作用域插槽

Vuex

是什么

专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。

什么时候用

多个组件依赖于同一状态；

来自不同组件的行为需要变更同一状态；

工作原理

组件调用dispatch方法指定action和参数(如图中jia)

当参数需要查询其他后端接口时(如图中chu)在Action中调用，不需要时(jia)可以在组件调commit

Action将动作和参数提交到Mutation中，其中包括动作的同名方法对数据进行操作

将更改后数据传到State中对具体State(数据)更改

最后根据更改后的数据渲染页面

计数案例

搭建Vuex环境

vue3=>vuex4

vue2->vuex3

//默认vuex4
npm i vuex --legacy-peer-deps
//vuex3
npm i vuex@3

创建store文件夹，下面新建index.js(改为文件用于创建Vuex的核心store)

index.js

main.js

使用

getter配置项

当对state中数据进行复杂的处理，并且需要在多个组件中应用时使用

mapState，mapGetters

自动生成sum：this.$store.state.sum的映射

使用

mapActions，mapMutations

同样有数组写法，略

使用

 

多组件共享数据

在不同组件之间通过引入mapXxx来共同使用操作vuex的state配置项中的数据

vuex模块化+namespace

index.js

使用(mapState,mapMutations)，action和getter用法相同

不用map的写法

进一步拆分

person.js

Action中发请求的情况