无法从组件中的方法访问 VueJS Global Mixin 只读变量

Question

我试图将 vuejs 用作 WP restapi 的前端脚手架。我需要所有 vue 组件都可以访问由 wordpress 生成的 api url。这是我所做的：

Vue.mixin({
  data: function () {
    return {
      get apiURL () {
        return document.querySelector('link[rel="https://api.w.org/"]').href;
      }
    }
  }
});

问题是，我可以从模板标签内部访问变量，如下所示：

<template>
    <div class="container">
        <p>{{ apiURL }}</p>
    </div>
</template>

但是我无法在组件的方法中访问它：

methods: {
  loadPosts: function () {
    this.status = 'Loading...';
    axios.get( apiURL + 'wp/v2/posts').then((response) => {
      this.status = '';
      this.posts = response.data;
      console.log(response.data);
    }).catch((error) => {
      console.log(error);
    });
  }
}

在这部分代码中，它给了我这个错误：

ReferenceError: apiURL is not defined

正确的做法是什么。我正在使用 VueJS 版本 2。

Answer 1

TLDR: 使用 this.apiURL:

methods: {
  loadPosts: function () {
    axios.get( this.apiURL + 'wp/v2/posts').then((response) => {
      ...
    });
  }
}

Vue.mixin({
  data: function () {
    return {
      get apiURL () {
        return 'https://jsonplaceholder.typicode.com/';
      }
    }
  }
});

new Vue({
  el: '#app',
  methods: {
    loadPosts: function () {
      console.log(`loadPosts: ${this.apiURL}`);
    }
  }
})

<script src="https://unpkg.com/vue@2.5.13"></script>

<div id="app">
  <button @click="loadPosts">loadPosts()</button>
</div>

全局 mixin 向所有 Vue 实例添加一个数据字段 (apiURL)，您可以像访问组件中本地声明的任何其他 data field 一样访问该字段（即，使用 this.FIELDNAME，所以在你的情况下是 this.apiURL）。否则没有 this 关键字，访问 apiURL 指的是一些全局变量（window），它不一定被定义。

无法从组件中的方法访问 VueJS Global Mixin 只读变量

VueJS Global Mixin readonly variable not accessible from method in a component

wordpress

vue.js

vuejs2

vue-mixin