LaravelとVueのベストプラクティスを考える #Vue.js

概要

悶え苦しみながらVueのベストプラクティスを追い求めた日々を記録するところ。
より良い方法があれば都度更新する。

前提

現状はSPAにしない(multi page application的な)
一部の画面だけ試験的にVueを導入するし
サーバーサイドはLaravel使ってる
Laravel-mixを使う
HACK: Laravel-mix使わずnodeから入れたい、そしてHMR使いたい(npm run watch-pollはモウイヤダ)
Single File Componentsを使う
vuex使う
vue-router使う
実装してく中で不都合な真実はその都度修正する

ディレクトリ構成

機能ごとにディレクトリを分ける。
機能ディレクトリの中にコンポーネントとstoreとrouterとapp.js(vueの宣言)を入れる。

components

どの単位でコンポーネント分けるのヨ
ってなりそうだからatomic designに則って分ける
hadaはここらへんを参考にした
https://qiita.com/MyPoZi/items/b30eef0ed239e9039caa

templatesとpagesの違いってなんだよとかどのコンポーネントの単位からstoreにアクセスするんだよとかは、やりながら考える

store

積極的にmodulesを使っていきたい所存
actions、getters、mutations、stateは分けたい女尊
https://qiita.com/tockn/items/2ce68b99e0839df52200

コンパイル先(public/js)

すでに生のjavascriptファイルがあり、vueをコンパイルしたファイルが混在する形になるので明示的に分けた(つもり)

store(Vuex)

vuexって？
https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3

vuex使うときはいつか
https://user-first.ikyu.co.jp/entry/design-of-vue-and-vuex
- 親子関係のあるコンポーネント間のデータの受け渡しは「Event Up, Props down」で
- 親子関係のないコンポーネント間のデータの共有はVuexで
- コンポーネントの固有のデータはコンポーネントのローカルステート(data)で
- グローバルなデータはVuexで

modulesの中のindexではstateとmutationsとactionsとgettersを受け取ってexportするだけ

assets/js/GMB/tag/store/modules/locations/index.js

import { state } from './state'
import { mutations } from './mutations'
import { actions } from './actions'
import { getters } from './getters'

export default {
    namespaced: true,
    state,
    getters,
    mutations,
    actions
}

storeのindexの中で各modulesを受け取る

assets/js/GMB/tag/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

import location from './modules/locations/index'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        location
    }
})

export default store

vue-router

基本的にroutesに設定するcomponentはpageディレクトリ配下のもの

assets/js/GMB/tag/router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

export default new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: require('./components/pages/EditTag.vue'),
        },
    ]
})