2021-03-26

Vue 获取不到data里面的数据 created 和 mounted 遇到的第一个坑：

在created 里面执行 methods 中的方法（该方法 用于获取数据 并 赋值给 data里面定义的数据），同时又有mounted 里的需要用到该数据

mounted 里面获取不到该数据，mounted 不会等待created 调用的方法执行结束再去执行，所以mounted 拿不到该数据

例如

 data() {
    return {
      vid: "",
      playAuth: ""
    };
  },
  created() {
    this.vid = this.$route.params.id;
    this.getPlayAuth();
    console.log("playAuth:" + this.playAuth);//控制台也没有 输出
  },
  methods: {
    getPlayAuth() {
      vodApi.getPlayAuth(this.vid).then(response => {
        this.playAuth = response.data.playAuth;
      });
    }
  },

  //在执行created 里面的方法的时候，mounted并不会等这次请求结束才去执行，而是直接就去执行，而此时data中的值还没有被赋值，所以拿不到
  mounted() {
    new Aliplayer(
      {
        id: "J_prismPlayer",
        vid: this.vid, // 视频id
        playauth: this.playAuth, // 播放凭证
        encryptType: "1", // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
        width: "100%",
        height: "500px"
      },
      function(player) {
        console.log("播放器创建成功");
      }
    );
  }

我希望 先在created 里面执行 getPlayAuth() 方法 把得到的playAuth 赋值给data中的playAuth， 然后mounted 中的Aliplayer 完成初始化， 但是Aliplayer始终得不到playAuth，连控制台都没有打印出来信息 （估计是控制台打印信息的时候并没有等待getPlayAuth（）方法执行完，mounted 也没有等待）
控制台：

于是我换了个写法：

试图在mounted 里面调用 methods 里的方法

 mounted() {
    this.getPlayAuth().then(response => {
      new Aliplayer(
        {
          id: "J_prismPlayer",
          vid: this.vid, // 视频id
          playauth: this.playAuth, // 播放凭证
          encryptType: "1", // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
          width: "100%",
          height: "500px"
        },
        function(player) {
          console.log("播放器创建成功");
        }
      );
    });
  }

但是报错 ：应该是mounted 执行的时候 还没有这个方法，这个坑还没解决，
以后找资料再来吧， 请知道的小伙伴 可以指导一下

最后是直接在mounted 里面调用api解决了

mounted() {
    vodApi.getPlayAuth(this.vid).then(response => {
      this.playAuth = response.data.playAuth;
      console.log("palyAuth:" + this.playAuth);
      new Aliplayer(
        {
          id: "J_prismPlayer",
          vid: this.vid, // 视频id
          playauth: this.playAuth, // 播放凭证
          encryptType: "1", // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
          width: "100%",
          height: "500px",
          autoplay: false
        },
        function(player) {
          console.log("播放器创建成功");
        }
      );
    });
  }

终于可以播放视频了