vue整体复习 四

ES6的扩展运算符

对象的扩展运算符

用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let zxx = {a: 1, b: 2};
let zxxs = {...zxx};
console.log(zxxs) // {a: 1, b: 2}
 
// 等价于
 
let zxx = {a: 1, b: 2};
let zxxs = Object.assign({}, zxx)
console.log(zxxs) // {a: 1, b: 2}

同样，如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。

let zxx = {a: 1, b: 2};
let zxxs = {...zxx, a:3, ...{b:3, c:2}};
console.log(zxxs) // {a: 3, b: 3, c: 2}

扩展运算符对对象实例的拷贝属于一种浅拷贝（拷贝的时候拷贝的是对象的引用）。

let zxx = {a: 1, b: 2, c: {age: 18}};
let zxxs = {...zxx};
console.log(zxxs) // {a: 3, b: 3, c: {age: 18}}
 
// ==================
 
zxx.c.age = 8
console.log(zxx) // {a: 3, b: 3, c: {age: 8}}
console.log(zxxs) // {a: 3, b: 3, c: {age: 8}}

数组的扩展运算符

• 可以将数组转换为参数序列

  function add(x, y) {
    return x + y;
  }
   
  const numbers = [4, 38];
  add(...numbers) // 42
  

• 可以复制数组

  const arr1 = [1, 2];
  const arr2 = [...arr1];
  console.log(arr2) // [1, 2]
  

• 扩展运算符可以与解构赋值结合起来，用于生成数组（如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错）

  const [first, ...rest] = [1, 2, 3, 4, 5];
  console.log(first) // 1
  console.log(rest)  // [2, 3, 4, 5]
   
  ============
   
  // 错误的写法
  const [...rest, first] = [1, 2, 3, 4, 5];
  console.log(first) // Rest element must be last element
  console.log(rest)  
  

• 扩展运算符还可以将字符串转为真正的数组

  [...'zxx'] // ["z", "x", "x"]
  

• 任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组

  function foo() {
      console.log(arguments) // [1, 2, 3, callee: function, Symbol(Symbol.iterator): function]
      const args = [...arguments];
      //arguments不是一个数组，而是一个伪数组，使用扩展运算符可以将其转换成真数组
      console.log(args) // [1, 2, 3]
  }
  foo(1, 2, 3) 
  

  但是扩展运算符不能把没有迭代器iterator的伪数组转为数组

  let likeArr = { "0":1,"1":2,"length":2 }
  let arr = [...likeArr] // 报错 TypeError: object is not iterable
   
  // 但是可以用Array.from把伪数组转为数组
  let likeArr = { "0":1,"1":2,"length":2 }
  let arr = Array.from(likeArr)
  console.log(arr) // [1,2]
  

• 等价于apply的方式

  function myFunction(v, w, x, y, z) { 
  	console.log(...arguments) // -1 0 1 2 3
  }
  var args = [0, 1];
  myFunction(-1, ...args, 2, ...[3]);
  

vuex的辅助函数

mapState 与 mapGetters 要放在计算属性computed中。

// import { mapState，mapMutations } from 'vuex'
computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    ['count','add'] // this.$store.state.evenOrOdd
  }),
  ...mapGetters({
      ['evenOrOdd'] // this.$store.getters.evenOrOdd
  }),
  ...mapGetters({
      multiple: 'multiple1'
  })
}

mapState函数的返回值是一个对象，对象里面包含着mapState中传入的参数数组相对应的函数

// mapState返回值
{
 count () {
     return this.$store.state['count']
 },
 add () {
     return this.$store.state['add']
 }
}

mapGetters的返回也是一个对象：

{
 evenOrOdd () {
     return this.$store.getters['evenOrOdd']
 },
 multiple () {
     return this.$store.getters['mutiple1']
 }
}

mapMutations与mapActions要放在methods中。

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    }),
     ...mapActions({
         ['remove'] // 将this.remove()映射为 this.$store.dispatch('remove')
     })  
  }
}

mapMutations和mapActions的返回值，同上

vuex的结构图

vuex案例：todoList

项目中会将store里面的 state、mutations、actions、getters分别拆分成多个文件

-store // 文件夹
 -state.js
 -mutations.js
 -actions.js
 -getters.js
 -index.js //入口js

Store

1. 在src目录下创建store文件夹

2. store文件夹下创建如上文件

   【index.js】store的入口文件

   // 引入
   import Vue from 'vue'
   import Vuex from 'vuex'
   
   import actions from './actions'
   import mutations from './mutations'
   import state from './state'
   import getters from './getters'
   
   Vue.use(Vuex)
   
   export default new Vuex.Store({
     state,
     mutations,
     actions,
     getters
   })
   

   此时还需要将store在main.js中进行配置，才会发挥作用

   import Vue from 'vue'
   import App from './App'
   
   import store from './store'
   
   new Vue({
     el: '#app',
     components: { App },
     template: '<App/>',
     store
   })
   
   

   组件中读取vuex中的状态数据需要在组件的computed对象中完成：...mapState(['todosArr'])，且computed对象中的属性也会成为组件的属性

   ---

   组件中一旦涉及到要更新vuex中的状态： this.$store.dispatch('add_todo',todoItem)触发actions里面的

   add_todo({commit},todoItem){
       commit(ADD_TODO,{todoItem})
   }
   

   然后触发mutations里面的函数直接更改数据

   ADD_TODO(state,{totoItem}){
       state.todosArr.unshift(todoItem)
   }
   

   ---

   一旦需要基于state中属性相关的计算属性的【getters】则需要写在getters.js文件中

   【getter.js】

   // 基于state中的属性的计算属性
   // 是计算属性的getters方法
   totalNum(state){
       return state.todosArr.length
   }, 
   //  根据state中的todosArr中的每一项是否选中来判断是否全选
   isCheckAll (state, getters) {
      return state.todosArr.length === getters.completedNum && getters.completedNum > 0
       
     // 这里的this并不是指的getters也不是组件对象而是undefined/null,因此不可以是this来获取getters里面的东西 
     // return state.todosArr.length === this.completedNum && this.completedNum > 0  
       
      // 这里的todosArr是state的一个属性 而 completeNum是state的一个计算属性（getters），因此如果使用state.completeNum相当于再去getter.js里面查找了，因而在getters里面的每一个函数中的参数中：第一个参数时state；第二个参数就是getters了，因为completeNum算是Getter.js中的属性，所以可以直接使用getters.completeNum
     //  return state.todosArr.length === state.completedNum && state.completedNum > 0
   }
   

   在组件中使用...mapGetters()获取getters里面的属性，需要写在组件的computed对象中

render配置

【普通版】

new Vue({
 el: '#app',
 components: { App }, // 将App标签映射为组件并插入到el对应的容器中
 template: '<App/>', // 使用模板创建App标签
 store
})

【升级版】

new Vue({
  el: '#app',
  // render是一个渲染函数，可以创建组件并添加到el对应的容器中
  render: function (createElement) {
    return createElement(App)
  },
  store
})

【升级简化常用版】

const vm = new Vue({
  el: '#app',
  render: h => h(App),
  store
})
Vue.use(vm)

1. 箭头函数中右边没有{}则相当于 return xxx
2. 如果箭头函数右边有{}，如果需要返回值则需要自己写return xxx了