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只能从组件中的方法访问的只读变量

1 个答案: