Vue js 2 中没有定义 axios

Question

强文本 我是 laravel 和 vue js 的新手。我正在尝试学习 Vue js。在 Laravel+Vue 项目中，我尝试使用 axios 发布 API 响应。 Vue js 2中没有定义axios。如何解决这个问题。当我添加一些数据时。数据没有显示，也没有我的删除功能。为什么我面临这个问题？感谢提前

app.js

import Vue from 'vue';

import App from './vue/app';



import { library } from '@fortawesome/fontawesome-svg-core'
import { faPlusSquare, faTrash } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faPlusSquare, faTrash)

Vue.component('font-awesome-icon', FontAwesomeIcon)


const app = new Vue ({
    el: '#app',
    components: { App }
});

addItemForm

<template>
  <div class="addItem">
    <input type="text" v-model="item.name" />
    <font-awesome-icon
      icon="plus-square"
      @click="addItem()"
      :class="[item.name ? 'active' : 'inactive', 'plus']"
    />
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      item: {
        name: "",
      },
    };
  },
  methods: {
    addItem() {
      if (this.item.name == "") {
        return;
      }
      axios
        .post("api/item/store", {
          item: this.item,
        })
        .then((response) => {
          if (response.status == 201) {
            this.item.name = "";
            this.$emit("reloadlist");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.addItem {
  display: flex;
  justify-content: center;
  align-content: center;
}

input {
  background: rgb(236, 164, 138);
  border: 0px;
  outline: none;
  padding: 5px;
  margin-right: 10px;
  width: 100%;
}
.plus {
  font-size: 20px;
}

.active {
  color: rgb(34, 211, 57);
}

.inactive {
  color: rgb(63, 66, 63);
}
</style>

app.vue

<template>

  <div class="todoListContainer">
    <div class="heading">
      <h2 id="title">Todo List</h2>
      <add-item-form v-on:reloadlist="getList()" />
    </div>
    <list-view :items="items"
    v-on:reloadlist="getList()" />
  </div>
</template>

<script>

import addItemForm from "./addItemForm.vue";
import listView from "./listView.vue";

export default {
  components: {
    addItemForm,
    listView,
  },
  data: function () {
    return {
      items: [],
    };
  },
  methods: {
    getList() {
      axios
        .post('api/items')
        .then((response) => {
          this.items = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.todoListContainer {
  width: 350px;
  margin: auto;
}

.heading {
  background: wheat;
  padding: 10px;
}
#title {
  text-align: center;
}
</style>

Answer 1

首先，安装 axios 和 vue-axios

npm install axios vue-axios

其次，将其导入您的script

<script>

import addItemForm from "./addItemForm.vue";
import listView from "./listView.vue";

import axios from 'axios';  // <-- add this line

export default {
  components: {
    addItemForm,
    listView,
  },
  data: function () {
    return {
      items: [],
    };
  },
  methods: {
    getList() {
      axios
        .post('api/items')
        .then((response) => {
          this.items = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

Answer 2

首先安装 axios 和 vue-axios 包。

npm install axios vue-axios

然后在 app.js 文件中写下这段代码：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

// this is the default base url in laravel
axios.defaults.baseURL = 'http://127.0.0.1:8000';

// this line is written to avoid csrf error
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
};

那么当你想使用 axios 的时候就写this.axios。

Answer 3

为了使用，axios 你必须导入 axios。考虑到您已经在项目中安装了axios，因为它是第三方库。

import axios from 'axios';

在组件中添加上面的行，无论您使用包。