用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
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]);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的返回值，同上
项目中会将store里面的 state、mutations、actions、getters分别拆分成多个文件
-store // 文件夹 -state.js -mutations.js -actions.js -getters.js -index.js //入口js在src目录下创建store文件夹
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对象中
【普通版】
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) 箭头函数中右边没有{}则相当于 return xxx如果箭头函数右边有{}，如果需要返回值则需要自己写return xxx了