Vue学习笔记（七）

Vuex

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

2.理解状态管理模式、集中式存储管理：将状态看作变量，前面两个名词的作用就是把多个组件需要共享的变量全部存储到一个对象里面；然后将这个对象放在顶层的Vue实例中，让其他组件可以使用；这样多个组件就可以共享这个对象中的所有变量属性了。

总结：Vuex就是可以让多个组件相互共享状态的插件。

3.什么状态需要在多个组件之间共享？

Vuex中只会放在多个界面间需要共享的多个状态，如：用户的登录状态、用户名称、头像、地理位置、商品的收藏、购物车中的物品等等，这些状态信息可以放在统一的地方进行保存和管理，且它们是响应式的。

4.在单个组件中进行状态管理：

• State：就是状态，可以当作即使data中的属性
• View：视图层，可以针对State的变化，显示不同的信息
• Action：主要是用户的各种操作，如点击、输入等，会导致状态的改变

5.将Vuex.store对象挂载到App.js中的Vue对象后，所有的Vue组件都会有$store对象。

6.Devtools是为Vue开发提供的一个浏览器插件，会记录每次修改store中state的状态（有多个组件修改state时是哪个组件修改了state），但只能跟踪同步操作（由mutation处理），不能跟踪异步操作（由Actions处理）。

7.总结使用Vuex的步骤：

• 提取出一个公共的store对象，用于保存在多个组件中共享的状态
• 将store对象放置在new Vue对象中，这样可以保证在所有组件中都可以使用
• 在其他组件中使用store对象中保存的状态即可：（1）通过this.$store.state.属性的方式来访问状态；（2）通过this.$store.commit(mutation中的方法)来修改状态
• 注意：不要直接改变$store.state.属性，而是要通过this.$store.commit(mutation中的方法)来修改状态

8.Vuex中的State是用于保存共享状态的，Getters类似于组件中的计算属性，Mutations用于定义方法来操作（同步操作）State中的变量，Actions主要做异步操作然后通过mutaion修改State中的状态，Modules用于处理划分了一些模块后针对不同的模块再进行数据的保存。

9.单一状态树（单一数据源）：Single Source of Truth，Vuex用单一状态树（即在一个项目中只创建一个store）管理应用层级的全部状态，便于在之后的维护和调试过程中，进行管理和维护。

const store = new Vuex.store({
  getters: {
    more20stuLength(state, getters) { // 第二个参数不管是什么名字，代表的都是getters
      return getters.more20stu.length
    }
  }
}

11.如果希望给getters中的方法传递参数，只能让getters本身返回另一个函数：

getter: {
  moreAgestu(state) {
    // return function(id) {
      // return state.students.filter(s => s.id > 20)
    // }
    return age => {
      return state.students.filter(s => s.age > 20)
    }
  }
}

12.Vuex的store状态更新的唯一方式：提交Mutation，Mutation主要包括两部分：

• 字符串的事件类型（type）

• 一个回调函数（handler），该回调函数的第一个参数就是state

  mutations: {
    // increment是事件类型
    // (state) { // 自动会有参数state
    //   state.counter++;
    // }是回调函数
    increment(state) { // 自动会有参数state
      state.counter++;
    },
  }
  

13.通过mutation更新数据时，可以传递一些函数：this.$store.commit("incrementCount", count)，参数count被称为payload，即mutation的载荷。如果要传递的参数不止一个，则参数将以对象的形式传递，然后从对象中取出相关的信息。

Vuex还提供了另外一种Mutation风格，它是一个包含type属性的对象。

// App.vue中的提交mutation代码
methods: {
  addCount(count) {
        // 1.普通提交风格，mutation中incrementCount方法接收的第二个参数就是count
        this.$store.commit("incrementCount", count)

        // 2.特殊提交风格，，mutation中incrementCount方法接收的第二个参数是一个对象：{type: "incrementCount", count}
        this.$store.commit({
          type: "incrementCount",
          count
        })
      },
}

// src/store/index.js中的mutation代码：
mutations:{
  // 1.普通提交方式对应的mutation写法
  incrementCount(state, count) {
    state.counter += count
  },
  // 2.特殊提交方式对应的mutation写法
  incrementCount(state, payload) {
    state.counter += payload.count
  },
}

14.什么是响应式？数据发生变化时，界面跟着刷新。

Vuex的store中的state是响应式的，当state中的数据发生改变时，Vue组件会自动更新，但这需要遵守一些Vuex对应的规则：

• 提前在state中初始化好所需的属性，可以以这种方式为state中的对象修改其属性：state.info.name = "sakura"；但不能以这种方式为state中的对象添加新属性：state.info["address"]="changsha"，这种方式不会刷新界面，
• 当给state中的对象添加新属性时，使用下面的方式：（1）使用Vue.set(obj, 'newProp', 123)；（2）用新对象给旧对象重新赋值。

mutations: {
  updateInfo(state) {
    // 修改已有属性的值
    // state.info.name = "sakura"
    
    // state.info["address"] = "长沙" //不推荐这么添加新属性，不是响应式的
    // 方法一：响应式添加新属性：Vue.set(要修改的对象, 索引值, 修改后的值 | 要添加的键, 对应的值)
    // set方法将属性address添加到响应式系统中
    // Vue.set(state.info, "address", "长沙")
    // 方法二：给info赋值一个新的对象
    state.info = {...state.info, "address":"changsha"}

    // 该方法做不到响应式删除属性
    // delete state.info.age
    // 该方法可以响应式删除属性
    // Vue.delete(state.info.age)
  }
}

只要属性定义到state中，这些属性都会被加入到响应式系统中，而它会监听属性的变化，属性发生变化时，会通知所有界面中用到该属性的地方，让界面发生刷新。

15. 在mutations中定义方法时，可以将方法名抽成常量存到mutation-type.js文件中，提交的时候也通过常量的方式提交。

16.一般Vuex中的mutation中的方法都是同步方法，提交mutation时其中不能有异步操作。并且只能在Action中处理异步操作，然后到mutation中修改state。使用devtools时可以捕捉到mutation的快照，但devtools不能追踪异步操作。

17.this.$store.commit('updateInfo')提交的是mutations中的方法，this.$store.dispatch('aUpdateInfo')提交的是actions中的方法，然后在actions中的方法执行代码this.$store.commit('updateInfo')提交mutations中的方法。

18.因为Vuex使用单一状态树，当应用很复杂时，store对象会变得臃肿，因此可以将store分割成模块（module），每个模块都有自己的state、mutations、actions、getters等。

19.App.vue提交mutation时，会先到store对象中查找是否有对应的mutation方法，然后到module中查找是否有对应的mutation方法，所以最好store和module中的mutation方法不要重名。

// index.js中moduleA中的actions方法
// 该写法将从context对象中取出state，commit，rootState这三个属性，这种行为被称为对象的解构
increamentIfOdd({state, commit, rootState}) {}

// const obj = {
//   name: "erin",
//   age: 20,
//   height: 1.70
// }

// const {age, name, height} = obj; // 虽然顺序和obj对象中的不一样，但是根据名字赋值的
// console.log(name); // 对应的是obj对象中的name

网络请求封装（axios）

1.网络模块选择

• 传统的Ajax基于XMLHtppRequest(XHR)，但其配置和调用方式等非常混乱，一般不会直接使用，而是用jQuery-Ajax
• 因为在Vue开发过程中不需要使用jQuery，所以其实不需要引用jQuery
• 官方在Vue1.x时推出了Vue-resource，其体积相对于jQuery小很多，但Vue2.x推出后去掉了Vue-resource，不再进行更新和维护
• axios框架可以在浏览器中发送XMLHttpRequests请求，在node…js中发送http请求，支持Promise API，拦截请求和响应，转换请求和响应数据等。

2.执行命令npm install axios@0.18.0 --save下载得到axios插件。

3.网站可以对模拟很多网站，可以通过该网站进行一些测试。

4.理解ajax跨域请求中的jsonp，参考链接，“拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>”，“跨源域资源共享（ CORS ）机制允许 Web 应用服务器进行跨源访问控制，从而使跨源数据传输得以安全进行。”学习链接（不管做前端还是后端这篇文章都需要看看，建议先复习一下计算机网络）

5.为了解决跨域的问题，了解Vue和vue-axios的区别。

6.学axios时教程用的服务器接口不能用了，翻了下评论区，有位好心的大佬搭建了一个：无参数: www.blogry.cn/test/index；有参数 www.blogry.cn/test/blog?title=我的编程经历。

7.使用axios.all()可以放入多个请求的数组，axios.all([])返回的结果是一个数组，使用axios.spread可将数组[res1,res2]展开为res1,res2。

8.从axios模块中导入对象时使用的实例是默认的实例，当给该实例设置一些默认配置时，这些配置就被固定下来了，但后续开发中不建议在.vue文件中使用第三方框架时直接import第三方框架/插件，为了避免第三方插件被抛弃的情况，必须自己封装一下。

9.axios提供了拦截器，用于在发送每次请求或者得到响应后，进行对应的处理。