Vue-从Mixin方法访问Mixin数据

Question

我有以下代码，似乎无法从mixin方法访问mixin数据/变量loading。我在这里做错了什么？

Vue.mixin({
data: function () {
return {
loading: false,
};
},
methods: {
getEntityList: async (entityName) => {
loading = true 
return await axios
.get("/api/" + entityName)
.then((response) => {
loading = false;
return response.data;
});
},
},
});

在Vue组件中，我调用以下函数：

export default {
name: "somename",
data() {
return {
accounts: [],
};
},
mounted() {
this.getEntityList('account').then(e => this.accounts = e);
},
};

Answer 1

在您使用API选项的情况下，您需要引用您的loading哦，是的，vue有一个行为，您需要使用"this.function"；以声明您的功能等。。具有CCD_ 3。

this.loading = true和this.loading = false

Answer 2

loading应该是this.loading，正如另一个答案所示。否则，它访问不存在的全局变量，该全局变量不是特定于组件的，也不是被动的。

getEntityList是箭头函数。在正则函数和箭头函数之间的选择应该始终是合理的。此处的箭头将阻止使用正确的this上下文。

then不需要与async..await一起使用，后者应该取代它

应该是：

async getEntityList(entityName) {
this.loading = true 
let response = await axios
.get("/api/" + entityName);
this.loading = false;
return response.data;
},

Answer 3

一个提示，可以帮助您！在浏览器控制台中，您可以放置Vue实例的名称，在您的情况下，它是>Vue.mixin。还有一件事你没有像下面这样实例化。例如：

var app = new Vue({
el: "#app",
data: {

好的，或者试试这样的。

data: {
loading: false,
methods:{
loadingFunction: function () {
this.loading = false;
// or return this.loading
}
}
}