Question

我正在使用Vue（和Laravel RESTful API）构建一个相当大的SPA。我很难在网上找到有关此资源的资源-组织与服务器通信的代码的一种好习惯是什么？

目前，我有src/api.js文件，该文件使用axios并定义了一些基本方法以及特定的API端点（已截断）：

import axios from 'axios';
axios.defaults.baseURL = process.env.API_URL;

const get = async (url, params = {}) => (await axios.get(url, { params }));
const post = async (url, data = {}) => (await axios.post(url, data));

export const login = (data) => post('users/login', data);

然后在我的组件中，我可以做

...
<script>
import { login } from '@/api';

...
methods: {
   login() {
       login({username: this.username, password: this.password})
           .then() // set state
           .catch() // show errors
   }
}
</script>

这是一个好习惯吗？是否应该将端点拆分为多个文件（例如auth，users，documents等）？对于这种事情是否有更好的设计，尤其是在重复方面（例如错误处理，显示加载条等）？

谢谢！

Answer 1

如果您只是使用Vue并希望每次都从同一组件中获取相同的数据，通常是idiomatic来检索数据并使用组件的mounted生命周期挂钩进行分配，像这样：

<template>
<h1 v-if="name">Hello, {{name}}!</h1>
</template>

<script>
export default {
  data() {
    return {
      name: '',
    }
  },

  mounted() {
    axios.get('https://example.com/api')
      .then(res => {
        this.name = res.data.name;
      })
      .catch(err => 
        // handle error
      );
  },
};
</script>

如果您要使用其中一条评论中提到的Vuex，则需要将API调用放入商店的actions属性中。

您最终将看到一个外观为something like this的Vuex商店：

const store = new Vuex.Store({
  state: {
    exampleData: {},
  },

  mutations: {
    setExampleData(state, data) {
      state.exampleData = data;
    },
  },

  actions: {
    async getExampleData() {
      commit(
        'setExampleData',
         await axios.get('https://www.example.com/api')
          .then(res => res.data)
          .catch(err => {
            // handle error
          });
      );
    },
  }
});

当然，随着应用程序的增长将状态，动作和突变分解为模块也是很好的做法！

Answer 2

如果使用Vue CLI，它将设置基本的项目结构。带有HelloWorld组件。您将需要将vue应用分解为组件。每个组件都应具有定义的角色，理想情况下，您可以对其进行单元测试。

例如，假设您要显示产品列表，则应创建一个产品列表组件。

<Products :list="products" />

在您的应用中，您会做类似的事情

data() {
  return {
    prodcuts: []
  }
},
mounted() {
  axios.get('/api/products').then(res => {
    this.products = res.data
  })
}

每当看到“是某物”时，就用它来制造组件，创建道具和方法，然后在挂接的钩子上使用api并填充该组件。

如何在Vue单页应用程序中构造API代码？

2 个答案: