Vue笔记07

VueX

1.认识VueX

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

2.状态管理

状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。

那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？

等等，如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象来管理吗？

当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢？没错，就是响应式。

如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是自己封装可能稍微麻烦一些。

不用怀疑，Vuex就是为了提供这样一个在多个组件间共享状态的插件，用它就可以了。

管理，管理什么状态？

但是，有什么状态时需要我们在多个组件间共享的呢？

如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。

比如用户的登录状态、用户名称、头像、地理位置信息等等。

比如商品的收藏、购物车中的物品等等。

这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的（待会儿我们就可以看到代码了，莫着急）。

单页面的状态管理

我们知道，要在单个组件中进行状态管理是一件非常简单的事情

什么意思呢？我们来看下面的图片。

这图片中的三种东西，怎么理解呢？

State：不用多说，就是我们的状态。（你姑且可以当做就是data中的属性）

View：视图层，可以针对State的变化，显示不同的信息。（这个好理解吧？）

Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。

多界面状态管理

Vue已经帮我们做好了单个界面的状态管理，但是如果是多个界面呢？

多个试图都依赖同一个状态（一个状态改了，多个界面需要进行更新）。不同界面的Actions都想修改同一个状态（Home.vue需要修改，Profile.vue也需要修改这个状态）

也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个视图，但是也有一些状态(状态a/状态b/状态c)属于多个试图共同想要维护的。状态1/状态2/状态3你放在自己的房间中，你自己管理自己用，没问题。但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理！！！

没错，Vuex就是为我们提供这个大管家的工具。

全局单例模式（大管家）

我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。之后，你们每个视图，按照我规定好的规定，进行访问和修改等操作。这就是Vuex背后的基本思想。

案例

如果没安装vuex需要安装：npm install vuex --save

配置

挂载到vue实例上
使用

虽然这样也可以修改值，但是官方不建议这样改，使用这种方法VueX不可以追踪到状态变化，应该通过提交mutation的方式

3.vuex状态管理图例

我们之前的修改是直接在vue components直接到State进行修改，官方是不建议这样修改的。

看到下图，表示我们修改值要先发送一个动作，在动作里修改，然后提交给Mutations，然后Mutations来改变State，由于Mutations那里有一个Devtools可以明确的追踪到状态的改变，可以跟踪到每次修改的状态。也可以使用components直接提交给Mutations

还有就是不可以在Mutations里做异步请求，如果在Mutations，devtools是同步的追踪不到异步的修改，所以不可以在Mutations做异步请求（例如去异步请求数据和修改），如果要做异步任务要在Actions那里做完异步请求后，提交给Mutations

安装vuejs devtools 插件查看

看到虽然我们修改了值，但是devtools没有跟踪到

使用提交Mutations的方式修改值

添加Mutations两个方法，一个给值++，一个给值–，参数state在调用的时候自动传入
触发事件提交给Mutations的increment函数

效果：简称到值得改变

4.State单一状态树

Vuex提出使用单一状态树, 什么是单一状态树呢？

英文名称是Single Source of Truth，也可以翻译成单一数据源。

但是，它是什么呢？我们来看一个生活中的例子。

我们知道，在国内我们有很多的信息需要被记录，比如上学时的个人档案，工作后的社保记录，公积金记录，结婚后的婚姻信息，以及其他相关的户口、医疗、文凭、房产记录等等（还有很多信息）。

这些信息被分散在很多地方进行管理，有一天你需要办某个业务时(比如入户某个城市)，你会发现你需要到各个对应的工作地点去打印、盖章各种资料信息，最后到一个地方提交证明你的信息无误。

这种保存信息的方案，不仅仅低效，而且不方便管理，以及日后的维护也是一个庞大的工作(需要大量的各个部门的人力来维护，当然国家目前已经在完善我们的这个系统了)。

这个和我们在应用开发中比较类似：

如果你的状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难。

所以Vuex也使用了单一状态树来管理应用层级的全部状态。

单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

5.Getter的使用

有时候，我们需要从store中获取一些state变异后的状态，类似于vue实例的计算属性。

定义getters
调用getters

6.Mutation传递参数

之前我们使用过这个Mutation，用于修改state，只需要在Mutation里定义一个事件类型和回调函数，然后要用的时候使用$store对象，this. $store.commit(‘mutation定义的事件类型’)，就可以使用

需求：但我们点击＋5或者+10时后怎么办，传入的值可能是一个5或者10，

需求：点击添加一个student

这时候就要传递参数了

定义Mutation的事件类型和回调函数
添加事件
提交

第二种提交参数的方式
第二种方式是一个对象，要使用对象.num,才可以获得参数
使用第二种方式可以提交多个参数

7.Mutation响应规则

Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新。这就要求我们必须遵守一些Vuex对应的规则：提前在store中初始化好所需的属性.

当给state中的对象添加新属性时, 使用下面的方式:

方式一: 使用Vue.set(obj, ‘newProp’, 123)

方式二: 用新对象给旧对象重新赋值

如果不使用Vue.set，添加一个属性

给state添加一个属性
在App.vue展示
点击修改时给他添加一个属性

使用上面这种方式不是响应式的，因为没有定义好这个属性（cli4为响应式）
如果想要他实现响应式怎么办？

之前我们学过数组有哪些就是响应? pop和push这样就是响应式的，

这里我们使用Vue.set()添加一个属性

第二个参数是属性名


效果
删除一个属性

使用Vue.delete(对象，要删除的属性名)

8.Mutation同步函数

通常情况下, Vuex要求我们Mutation中的方法必须是同步方法.

主要的原因是当我们使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照.

但是如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成.

比如我们之前的代码, 当执行更新时, devtools中会有如下信息

9.Action定义

在这里做异步请求，然后提交给mutation，不可以直接修改值，否则devtools还是检测不到
mutation修改

比如但我们成功修改数据了返回一个成功信息该怎么办？

当action成功是回调这个函数

成功回调

使用第二种方式

使用返回一个Promise，如果Promise里面的业务成功的话，就会调用resolve方法，返回，然后执行调用者的then方法

10.Module

Module是模块的意思, 为什么在Vuex中我们要使用模块呢?

Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理。当应用变得非常复杂时,store对象就有可能变得相当臃肿.

为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutations、actions、getters等

我们按照什么样的方式来组织模块呢?

我们来看下面的代码：

Module的使用

在根对象引入之后，vuex编译的时候这个模块会放到stater上去，

通过module引入的模块，会放到根目录的state，所以通过a对象去获取

可以看到引入的模块合并在一起了

11.Module的mutation修改状态

module的mutation里的事件类型尽量不要和根对象的mutation的事件类型不要一样，因为他们最后都是会合并在一起的

直接使用commit提交，最终会module的mutation会和根对象的mutation合并在一起，所以事件类型不要重名

12.module的getters

getters可以有三个参数
直接通过getters获取

getters都合并在一起

13.module中的actions的使用

修改成功

axios

1.axios基本介绍

安装axios 运行时依赖

npm install axios --save

常见的网络请求模块，以及优缺点对比。

• JSONP的原理和封装
• JSONP原理回顾
• JSONP请求封装

axios的内容详解

• 认识axios网络模块
• 发送基本请求
• axios创建实例
• axios拦截器的使用
  
  
  axios功能特点

1. 在浏览器中发送 XMLHttpRequests 请求
2. 在 node.js 中发送 http请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 等等

作者也推荐使用axios

2.axios的请求方式

支持多种请求方式:

• axios(config)
• axios.request(config)
• axios.get(url[, config])
• axios.delete(url[, config])
• axios.head(url[, config])
• axios.post(url[, data[, config]])
• axios.put(url[, data[, config]])
• axios.patch(url[, data[, config]])

3.axios的使用

基本使用

返回的对象里面存在数据

对象里存在状态码、数据，请求头类型…

发送get请求

axios的并发请求

之前我们有个例子就是需要两个请求都成功之后才可以继续完成的需求，使用axios完成
使用axios.all, 可以放入多个请求的数组.

paxios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2，

4.axios的全局配置

在上面的示例中, 我们的BaseURL是固定的，事实上, 在开发中可能很多参数都是固定的.

但是以下配置也还是做不到全局配置
定义全局配置


axios的常见配置选项

5.axios模块封装

axios实例

为什么要创建axios的实例呢?

当我们从axios模块中导入对象时, 使用的实例是默认的实例.

当给该实例设置一些默认配置时, 这些配置就被固定下来了.

但是后续开发中, 某些配置可能会不太一样.

比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.

这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

创建axios实例


axios封装

如果在每个组件里使用axios进行网络请求，如果当axios不进行维护时，去使用另外一个网络框架，这时就得全部一个个的修改，极其麻烦，我们只需要对axios进行一层封装即可，这样扩展性高。

6.回调函数

如果网络是否发送成功需要回调

方式1
方式2

只传入一个对象，对象里包含了成功回调函数，失败回调函数和发送 网络请求的信息




方式3

返回的是一个Promise对象。成功了执行then，并返回一个数据 ，失败了执行catch，并返回一个数据

res和err就是成功或失败了传过来的


方式4

7.axios的拦截器

axios的拦截器分为，请求成功拦截，请求失败拦截(浏览器由于一些原因不难发送请求)，响应成功拦截，响应失败拦截（服务端没有响应，例如404…）

8.Vue的响应式原理