Как структурировать код API в одностраничном приложении Vue? - PullRequest
Новая
       31

Как структурировать код API в одностраничном приложении Vue?

0 голосов
/ 25 июня 2019

Я строю довольно большой SPA, используя Vue (и Laravel для RESTful API). Я с трудом нахожу ресурсы по этому поводу в Интернете - что является хорошей практикой для организации кода, который взаимодействует с сервером?

В настоящее время у меня есть файл 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 и т. Д.)? Есть ли лучший дизайн для такого рода вещей, особенно когда дело доходит до повторения (например, обработка ошибок, отображение полос загрузки и т. Д.)?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 25 июня 2019

Если вы используете Vue CLI, он настроит базовую структуру проекта. С компонентом HelloWorld. Вы захотите разбить ваше приложение Vue на компоненты. Каждый компонент должен иметь определенную роль, которую в идеале вы могли бы затем использовать для модульного тестирования.

Например, допустим, вы хотите отобразить список продуктов, затем вам нужно создать компонент списка продуктов. 

<Products :list="products" />

В вашем приложении вы бы сделали что-то вроде 

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

Всякий раз, когда вы видите что-то, что «является блоком чего-то», делайте из него компонент, создавайте реквизиты и методы, а затем на подключенном хуке потребляйте API и заполняйте компонент.

0 голосов
/ 25 июня 2019

Если вы просто используете Vue и ожидаете, что каждый раз будете получать одни и те же данные из одного и того же компонента, обычно идиоматический извлекает данные и назначает их с помощью ловушки жизненного цикла компонента 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 в свойство действий магазина.

В итоге вы получите магазин 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
          });
      );
    },
  }
});

Конечно, вы разбиваете свое состояние, действия и мутации на модулипо мере роста вашего приложения это тоже хорошая практика!

...