2020遇到的问题

I belong to : Experience

nuxt page 页面data不能序列化方法

how-do-i-resolve-cannot-stringify-a-function-error-in-nuxt

在page里的data或者asyncData里面返回了方法，而这个方法是不能通过序列化传到前端的。但是路由间切换的时候，不需要序列化，所以没问题。

解决方法：把产生错误的组件放到components目录下。

关于 vuex 报错 Do not mutate vuex store state outside mutation handlers.

数组用array.slice(); 对象用Object.assign({},obj)

display: table-cell 无法使用 margin/ padding 的解法

.image-list {
  display: table;
  border-collapse:separate;
  border-spacing: 5px;
}

async 函数返回的都是promise

return 一个 async函数结果都是一个 promise,即使async函数里面是return false

浏览器拦截打开新窗口解决方案

博文

规则总结就参与测试的浏览器，三种打开新窗口的方式对拦截结果没有影响。所有浏览器都不允许非用户操作引起的打开新窗口。所有浏览器都不允许在异步 ajax 请求中打开新窗口。 Edge 和 IE 不允许在 setTimeout 中打开新窗口，Chrome、Firefox 允许在用户操作事件中的 setTimeout 中打开新窗口。 Firefox 和 IE 不允许在用户键盘操作事件中打开新窗口
解决方案需要在异步 ajax 请求中打开新窗口的可以使用请求前打开新窗口，请求拿到结果后再修改窗口地址的方式。需要在键盘回车事件中打开新窗口的推荐使用 form 表单包装并添加 button 的方式，回车触发默认的 submit 事件进行新窗口的打开。

不要再computed属性里面emit,有可能失败

ES5写promise的链式调用

// 创建 MyPromise构造函数
function MyPromise (fn) {
  let self = this;
  this.value = null; // 存储resolve数据
  this.status = 'pending'; // 存储状态
  this.err = null; // 存储reject错误信息
  this.onFulfilledArr = []; // 存储将要执行的resolve函数
  this.onRejectedArr = []; // 存储将要执行的reject函数
  function resolveFn (val) { // resolve()时执行的函数
    if (self.status === 'pending') { // 只用pending状态才能继续进行
      self.value = val; // 存储数据
      self.status = 'fulfilled'; // 改变状态
      // 逐个调用then()函数
      self.onFulfilledArr.forEach(function(thenFn) {
          thenFn(self.value);
      });
    }
  }
  function rejectFn(errMsg) { // reject()时执行的函数
    if (self.status === 'pending') {
      self.err = errMsg;
      self.status = 'rejected';
       self.onRejectedArr.forEach(function(catchFn) {
        catchFn(self.err);
      });
    }
  }
  try {
    fn(resolveFn, rejectFn);
  } catch (e) {
    rejectFn(e);
  }
}

MyPromise.prototype.then = function(onFulfilled, onRejected) {
  // 如果当前处于pending状态，就将函数压入对应数组
  var self = this;
  if (self.status === 'pending') {
    self.onFulfilledArr.push(onFulfilled);
    self.onRejectedArr.push(onRejected);
  }
  // fulfilled状态就执行onFulfilled()方法
  if (self.status === 'fulfilled') {
    onFulfilled(self.value);
  }
  // onFulfilled状态就要执行onRejected()函数
  if (self.status === 'rejected') {
    onRejected(self.err);
  }
  return this; // return this是链式调用关键
};