Аксиос не определен в Vue - PullRequest
Новая
       22

Аксиос не определен в Vue

0 голосов
/ 01 ноября 2018

Я пытаюсь получить данные из Wordpress API. Моя консоль выдает мне сообщение об ошибке "axios is notfined" Вот мой компонент post.vue. 

        <template>
        <div>
    <table class="table is-bordered">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Posted at</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="post in posts" :key="post.id">
                        <td>{{post.title.rendered}}</td>
                        <td>{{post.date_gmt}}</td>
                    </tr>
                </tbody>
            </table>

            <pagination :pagination="pagination"
                        @prev="--postsData.page; getPosts();"
                        @next="postsData.page++; getPosts();">
            </pagination>
        </div>

    </template>


<script>
    import pagination from './pagination.vue'
    export default {
        mounted() {
            this.getPosts();
        },
        components: {
            'pagination': pagination
        },
        data() {
            return {
                postsUrl: 'http://localhost:8080/wp-json/wp/v2/posts',
                posts: [],
                postsData: {
                    per_page: 10,
                    page: 1
                },
                pagination: {
                    prevPage: '',
                    nextPage: '',
                    totalPages: '',
                    from: '',
                    to: '',
                    total: '',
                },
            }
        },
        methods: {

            getPosts() {
                axios
                .get(this.postsUrl, {params: this.postsData})
                    .then((response) => {
                        this.posts = response;
                        this.configPagination(response.headers);
                    })
                    .catch( (error) => {
                        console.log(error);
                    });
            },
            configPagination(headers) {
                this.pagination.total = +headers['x-wp-total'];
                this.pagination.totalPages = +headers['x-wp-totalpages'];
                this.pagination.from = this.pagination.total ? ((this.postsData.page - 1) * this.postsData.per_page) + 1 : ' ';
                this.pagination.to = (this.postsData.page * this.postsData.per_page) > this.pagination.total ? this.pagination.total : this.postsData.page * this.postsData.per_page;
                this.pagination.prevPage = this.postsData.page > 1 ? this.postsData.page : '';
                this.pagination.nextPage = this.postsData.page < this.pagination.totalPages ? this.postsData.page + 1 : '';
            }
        }
    }
</script>

Я действительно понятия не имею, что здесь не так, я установил axios, npm install axios,

Вот мой файл main.js 

import Vue from 'vue'
import App from './App.vue'
import posts from "./components/posts.vue";
import axios from "axios";
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

Vue.prototype.$axios = axios;

Vue.component('posts', posts);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Кто-нибудь может мне помочь с этим? Я не понимаю, где я ошибся?

Спасибо всем

1 Ответ

0 голосов
/ 01 ноября 2018

Вам необходимо добавить import axios from 'axios' к вашему компоненту. Еще лучше создать файл конфигурации с именем api.js в вашей директории src и добавить что-то вроде этого: 

import axios from 'axios';

export default axios.create({
    baseURL: `http://127.0.0.1:8000/`,
    headers: {
        'Content-Type': 'application/json',
        'Authorization': "JWT " + localStorage.getItem('token')
    },
    xsrfCookieName: 'csrftoken',
    xsrfHeaderName: 'X-CSRFToken',
    withCredentials: true
});

Затем в ваши компоненты вы импортируете так: 

import API from '../api'

И сделайте API.get вместо axios.get

Это полезно, потому что:

  • Вам не нужно менять базовый URL в 30 местах, когда вам нужно его изменить.
  • Вам не нужно снова и снова добавлять одни и те же заголовки в вызовах axios.

  • Вы можете использовать более короткие URL в своих вызовах, например:

    API.get('foo/bar/') .then(response => { }

...