Vue 的作用域的问题

Question

下面是一个vue组建的代码片段截图

如图所示,在生命周期钩子中使用 this.$store等this对象信息
各位大大可以直接上教程地址,也可以直接指点

Answer 1

箭头函数会造成作用于穿透，此时Vue里面的this指向的并非Vue实例，而是export default这整个对象。

解决方法：
使用ES5语法：

mounted: function() {
    ...
}

使用ES6语法：

mounted() {
    ...
}

最后说一句，箭头函数并不是万能函数，它虽然简化了很多操作，但是同时也带来了一些不便：比如使用箭头函数锁带来的作用域穿透和变量数组未定义，在某些情景下会让不明就里的人掉进语法的坑。

---

在独立的JS中使用，有几种方法：

第一，如果想要new created()的对象中this和当前this一致，可以使用call()或者bind()方法进行上下文绑定

第二，如果只是临时使用this.$store这一个变量，可以通过new create(this.$store)构造方法初始化一个内部值指向this.$store

第三，也可以通过实例化之后，向实例中添加数据；当然需要在create()类里添加公共属性用于接收this.$store

第四，同方法二，但是可以构造方法传入整个this

Answer 2

不要用箭头函数。官方文档有说到，箭头函数绑定父级上下文，所以 this 不会像预想的一样是 Vue 实，

Answer 3

不要使用箭头函数

Answer 4

不要对mounted使用箭头函数，代码如下：

mounted() {
    this.$store.commit("welcome_up");
    console.log("791", this.$store);
    
    // 直接把this.$store当参数传进去不行吗？
    var created_obj = new created(this.$store);
    console.log(created_obj);
}

Answer 5

mounted 不能使用箭头函数，这会改变 Vue this 的指向，因为 Vue 是代理了 data 和 method 的