vuex里mapState,mapGetters使用详解

vuex里mapState,mapGetters使用详解：
转自https://www.cnblogs.com/m2maomao/p/9954640.html

…三个点es6用法

用法：… 将数组序列化，成为逗号隔开的序列。
1.获取数组最大的值。

常规：Math.max(1,2,3)

写法：Math.max(…[1,2,3])等同于上面的例子

2.调用方法

function sum(a,b){
  console.log(a+b)//5
}

sum(…[2,3])

3.连接数组

var arr1 = [0, 1, 2]; 
var arr2 = [3, 4, 5];  
arr1.push(...arr2);

4.连接数组

var arr1 = ['a', 'b']; 
var arr2 = ['c']; 
var arr3 = ['d', 'e'];
[...arr1, ...arr2, ...arr3] 

5.字符串转为真正的数组

[...'hello']  // [ "h", "e", "l", "l", "o" ]  

6.将类数组转为真正的数组,去重

[…new Set([1,2,3,3])] //new Set返回一个类数组，…把类数组转化为真正的数组

7.扩展运算法

let map = new Map([  
      [1, 'one'],  
       [2, 'two'],  
       [3, 'three'],  
]); 
 
let arr = [...map.keys()]; // [1, 2, 3]  

在写vue项目的时候由于你不知道params有几个，可以直接 params:param.data 或者params: {
…param.data}

return axios({
　　method: param.type,
　　url: value.prefix + param.url + value.postfix,
       params: {
　　    ...param.data
       }
})

vue中Promise的用法

promise是什么？
1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

为什么会有promise？
为了避免界面冻结（任务）

同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单，这么小的动作，服务员却要你等到别人的一个大动作完成之后，才能再来招呼你，这个便是同步的问题：也就是“顺序交付的工作1234，必须按照1234的顺序完成”。
异步：则是将耗时很长的A交付的工作交给系统之后，就去继续做B交付的工作，。等到系统完成了前面的工作之后，再通过回调或者事件，继续做A剩下的工作。
AB工作的完成顺序，和交付他们的时间顺序无关，所以叫“异步”。

1.promise简单用法
function2(){
    // 你的逻辑代码 
    return Promise.resolve(/* 这里是需要返回的数据*/)
}

function3(){
    // 你的逻辑代码 
    return Promise.resolve(/* 这里是需要返回的数据*/)
}

// 调用
function1(){
    this.function2().then(val => { 
        this.function3();
    });
}
2.promise高阶用法
init1(){
return new Promise((resolve, reject) => {
    let data={
        dateStr:this.time
    };
    api.get('url', null).then( res => {
       //自己的操作
        resolve()
    }).catch(err => {
        reject()
    });
});
};
init2(){
return new Promise((resolve, reject) => {
    let data={
        dateStr:this.time
    };
    api.get('url', null).then( res => {
       //自己的操作
        resolve()
    }).catch(err => {
        reject()
    });
});
};


//调用
Promise.all([this.init1(),this.init2()]).then(() => {
    //两个都调成功以后执行的操作
//主要是loading问题
}).catch(err => {
    // 抛出错误信息
});

对promise这个概念之前已经有了一些浅显的理解，最近又有了一些新的理解。

.then()的时候到底是在then什么…
首先要理解…Promise是一个对象，有then()方法的对象
then()的入参是一个函数，通常在promise链中，入参是 一个返回promise的函数 ，这句话好像有点拗口，就是说入参是一个函数，这个函数会return一个promise对象
如何破坏promise链
如果有这样一个promise链：

p1().then(p2).then(p3)
  .then(function(data) {
    console.log('data: ' + data);
  })
  .catch(function(error) {
    console.log('error: ' + error);
  });
 
function p1() {
  return new Promise(function(resolve, reject) {
    console.log('p1 resolved');
    resolve(123);
  });
}
 
function p2() {
  return new Promise(function(resolve, reject) {
    console.log('p2 rejected');
    reject(456);
  });
}
 
function p3() {
  return new Promise(function(resolve, reject) {
    console.log('p3 resolved');
    resolve(789);
  });
}

上面这个例子，你看到的console.log会是这样：

p1 resolved
p2 rejected
error: 456

并没有看到 p3 的log，而是看到了error message，也就是说：

在一个promise链中，只要任何一个promise被reject，promise链就被破坏了，reject之后的promise都不会再执行，而是直接调用.catch方法。
这也是为什么在standard practice中，一定要在最后加上 .catch 的原因。通过 .catch 能够清楚的判断出promise链在哪个环节出了问题。

如何按顺序执行已经定义的promise
这个情况在什么时候会用到呢？比如你有一个队列，队列里有很多任务，这些任务并不互相依赖执行后返回的结果。每个任务完成的时间都是不确定的，并且计算资源只允许一次执行一个任务。简单的来说，就是 做完A之后再去做B，并且AB是相互独立的

假如我现在有一堆promise对象，大概长这样：

//p2, p3与p1相似
//当doSomething()执行完毕的时候，调用resolve()
//使得当前promise状态转变为fulfilled即可
var p1 = new Promise(function(resolve, reject) {
  //do something here
  //when do something done
  resolve();
});
 
p1.then(function() {
    return p2
  })
  .then(function() {
    return p3
  })
  .catch()

请注意，前一部破坏Promise链中分定义的p1 p2 p3是 函数 ，而此部分定义的p1 p2 p3是 对象！对象！对象！
如前面提到，promise是一个有then方法的对象，因此p1可以直接调用then
Q:为什么开头调用不是 p1().then ？
A: 因为p1是一个对象啊！！！对象啊！！！象啊！！！啊！！！
然而promise链中then方法的入参是 一个返回promise对象的函数 ，p2并不是一个函数，因此不能then(p2)；
但p2是一个promise对象，已经满足了then方法入参的一半需求，那么写一个函数并且返回p2，就满足了入参的全部需求

dispatch

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch{(}^{\prime }mutations方法{名}^{\prime },值)commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)