Vue開発アーキテクチャ

architecture
2021-10-15

いくつか例を見て決める

• アトミックデザイン はあまり良く言われないことが多い
  • 独自の分け方が乱立していて辛い
• アーキテクチャのベストプラクティスはディレクトリ構成まで教えてくれない

命名の話: BCDデザイン

例1

Nuxt.jsのディレクトリ構造とコンポーネント設計を公開 | 株式会社NoSchool

client
├── apis # HTTP APIの型定義
├── apisMicrocms # Micro CMSの型定義
├── assets
├── components
		├── error
		├── layouts
		├── materials
		├── objects
		├── pages
		├── parts
		└── templates
├── composables # composition-apiを使った関数
├── layouts
├── middleware
├── modules # Vueコンポーネントから切り出したい && マナリンク独自の処理
├── pages
├── plugins
├── static
├── store
├── types # 型定義をひたすら置いています
└── utils # より一般的な処理(スニペット単位でGitHubで公開しても良いような汎用的なもの)

VueX + API層の構成

How to structure api calls in Vue.js?

Axios object

import axios from 'axios'
export default axios.create({
  baseURL: 'http://localhost:3000/api/v1',
  timeout: 5000,
  headers: {
    'X-Auth-Token': 'xxx',
    'Content-Type': 'application/json'
  }
})

Component

methods: {
 getProducts (prodId) {
     this.$store.dispatch('FETCH_PRODUCTS', prodId)
  }
}

VueX store

import myApi from '../../gateways/my-api'
const state = {
  products: []
}
 
const actions = {
  FETCH_PRODUCTS: (state, prodId) => {
    myApi.get('products?id=' + prodId).then(response => state.commit('SET_PRODUCTS', response))
  }
} 
 
// mutations
const mutations = {
  SET_PRODUCTS: (state, data) => {
    state.products = Object.assign({}, response.data)
  }
}
 
const getters = {
}
 
export default {
  state,
  mutations,
  actions,
  getters
}

• SPAの認証トークンの保存場所の話
  • SPA認証トークン、Cookieに保存するか？LocalStorageに保存するか? - Qiita
• Cookie: 攻撃: CSRF
• プロトタイプ汚染攻撃