src/
├── components/       # Vue Components
├── services/         # ไฟล์ที่จัดการการเชื่อมต่อ API
│   ├── auth.js       # Authentication Service
│   ├── product.js    # Product Service
│   └── user.js       # User Service
├── store/            # Vuex Store
├── views/            # Pages หลักของแอปพลิเคชัน
├── router/           # การตั้งค่า Routes
└── App.vue           # Root Component

// services/product.js
import axios from 'axios';

const productApi = axios.create({
  baseURL: 'https://product-service.example.com/api',
  timeout: 5000
});

export const getProducts = async () => {
  const response = await productApi.get('/products');
  return response.data;
};

export const getProductById = async (id) => {
  const response = await productApi.get(`/products/${id}`);
  return response.data;
};

// services/user.js
import axios from 'axios';

const userApi = axios.create({
  baseURL: 'https://user-service.example.com/api',
  timeout: 5000
});

export const getUsers = async () => {
  const response = await userApi.get('/users');
  return response.data;
};

export const getUserById = async (id) => {
  const response = await userApi.get(`/users/${id}`);
  return response.data;
};

<template>
  <div>
    <h1>Dashboard</h1>
    <h2>Products</h2>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.name }}</li>
    </ul>

    <h2>Users</h2>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import { getProducts } from '@/services/product';
import { getUsers } from '@/services/user';

export default {
  data() {
    return {
      products: [],
      users: []
    };
  },
  async mounted() {
    this.products = await getProducts();
    this.users = await getUsers();
  }
};
</script>

import { getProducts } from '@/services/product';

const state = {
  products: []
};

const mutations = {
  SET_PRODUCTS(state, products) {
    state.products = products;
  }
};

const actions = {
  async fetchProducts({ commit }) {
    const products = await getProducts();
    commit('SET_PRODUCTS', products);
  }
};

const getters = {
  allProducts: (state) => state.products
};

export default {
  state,
  mutations,
  actions,
  getters
};

import { getUsers } from '@/services/user';

const state = {
  users: []
};

const mutations = {
  SET_USERS(state, users) {
    state.users = users;
  }
};

const actions = {
  async fetchUsers({ commit }) {
    const users = await getUsers();
    commit('SET_USERS', users);
  }
};

const getters = {
  allUsers: (state) => state.users
};

export default {
  state,
  mutations,
  actions,
  getters
};

// services/auth.js
import axios from 'axios';

const authApi = axios.create({
  baseURL: 'https://auth-service.example.com/api'
});

export const login = async (credentials) => {
  const response = await authApi.post('/login', credentials);
  return response.data;
};

export const setAuthHeader = (token) => {
  axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
};