Configuração Inicial do Vue Resource

No projeto vue-sui-demo, o Vue Resource é integrado como plugin para gerenciar requisições HTTP. A configuração principal ocorre no arquivo src/app.js, onde o plugin é carregado e as opções globais são definidas. O exemplo abaixo demonstra como estabelecer a raiz das requisições com base no abmiente de execução e ativar a emulação de formato JSON:

import VueResource from 'vue-resource'
Vue.use(VueResource)

const apiRoot = process.env.NODE_ENV === 'development' 
  ? '/local/assets' 
  : 'https://api.producao.com/dados'
Vue.http.options.root = apiRoot
Vue.http.options.emulateJSON = true

Essa configuração permite que as requisições se adaptem automaticamente entre desenvolvimento e produção, simplificando a manutenção.

Requisições de Dados em Componentes

Para carregar dados, os componentes utilizam this.$http. O componente de carrossel no diretório src/components/Carrossel.vue busca informações de um arquivo JSON local:

this.$http.get('slides.json')
  .then(res => {
    this.listaSlides = res.data
  })
  .catch(err => {
    console.error('Falha ao obter slides:', err)
  })

De maneira semelhante, a view de tarefas em src/views/Principal.vue recupera dados assincronamente:

async function carregarTarefas() {
  try {
    const resposta = await this.$http.get('atividades.json')
    this.tarefas = resposta.data
  } catch (erro) {
    this.erroCarregamento = true
  }
}

Adaptação para Ambientes Diferentes

O projeto utiliza variáveis de ambiente para direcionar as requisições. Durante o desenvolvimento, os dados são obtidos de arquivos JSON no diretório src/assets/, como slides.json e atividades.json. Em produção, as requisições apontam para endpoints de API reais, configurados via arquivos como config/ambiente.dev.js e config/ambiente.prod.js. Essa abordagem garante uma transição suave entre estágios.

Técnicas para Melhorar a Experiência do Usuário

Tratamento de Erros

Adicionar tratamento de erros robusto é essencial. Um padrão comum inclui capturar exceções e exibir feedback ao usuário:

this.$http.get('/endpoint/dados')
  .then(resultado => {
    processarDados(resultado.data)
  })
  .catch(erro => {
    this.mostrarMensagem('Erro na comunicação com o servidor')
    registrarLog(erro)
  })

Indicadores de Carregamento

Para aprimorar a interatividade, utilize estados de carregamento durante as requisições:

this.carregando = true
this.$http.get('relatorio.json')
  .then(dados => {
    this.relatorio = dados.data
  })
  .finally(() => {
    this.carregando = false
  })

Mdoularização de Chamadas de API

Para projetos compelxos, encapsule as requisições em um módulo dedicado. Crie um arquivo src/servicos/api.js com funções específicas:

import Vue from 'vue'

export const apiServico = {
  obterTarefas: () => Vue.http.get('atividades.json'),
  buscarSlides: () => Vue.http.get('slides.json'),
  enviarFeedback: (dados) => Vue.http.post('/feedback', dados)
}

Nos componentes, importe e utilize essas funções para manter o código organizado:

import { apiServico } from '@/servicos/api'

export default {
  methods: {
    async iniciarDados() {
      const tarefas = await apiServico.obterTarefas()
      this.tarefas = tarefas.data
    }
  }
}

Essa estrutura facilita a manutenção e a evolução das integrações com o backend.