4月からプログラマーになったエラです。
「Javascriptって、まあ聞いたことあるけど」
「Vueって、まあ聞いたことあるけど」
……みたいな感じから今はNuxt.jsを今やってます。
こんな感じなので、勉強中に「??」となることが多く、勉強してるだけで毎日目からウロコです。
……てことで、ためになったことをまとめていきます。
1.layout/default.vueを他ページでも使うことができる
以下のようなdefault.vueがあったとき
layout/default.vue
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light mb-3">
<div class="container">
<a class="navbar-brand" href="/">Task List</a>
</div>
</nav>
<div class="container">
<Nuxt />
</div>
</div>
</template>
<script>
export default {}
</script>
<style>
.container {
margin: 0 auto;
max-width: 480px;
}
</style>
この<Nuxt />と言う部分に他のVueファイルが適用されます。
たとえばpages/index.vueのファイル、つまりhttp://localhost:3000にアクセスしたとき、もしpages/index.vueが以下のようであれば
pages/index.vue
<template>
<div>
<router-link class="btn btn-light" to="/form">
投稿画面
</router-link>
<br><br>
<ul class="list-group list-group-flush">
<li class="list-group-item" v-for="message in messages">
<div>
{{ message.name }}
</div>
<div>
{{ message.message }}
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
}
},
computed:{
messages(){
return this.$store.state.chat.messages
}
},
async mounted() {
await this.$store.dispatch("chat/getMessages")
},
}
</script>
<style>
</style>
こんな感じ↓↓になります。
まあ、つまりlayout/default.vue内で定義した大枠のなかにpages/index.vueという小さな枠組みが入ってるわけです。
でどういう仕組みで入ってるかって言うとlayout/default.vueの<Nuxt />って言う部分にpages/index.vueの中身が入ってくるわけです。
うーん、なるほど。
2.Vuex Router
これはNuxt.jsに限った話じゃないですが状態管理Vuex Routerが便利です。
Vuex Routerは簡単に言うと
- storeディレクトリにjsファイルを作る
- そのjsファイルでデータを管理する
ってかんじですね。
例えばこんな感じ↓。
store/chat.js
export const state = () => {
return {
messages: []
}
}
export const mutations = {
ADD_MESSAGE(state,message){
state.messages.unshift(message)
},
LOAD_MESSAGE(state,messages){
state.messages = messages
}
}
export const actions = {
async getMessages({commit}){
const db = this.$fb.firestore()
const result = await db.collection("messages").get()
commit("LOAD_MESSAGE",result.docs.map((d)=>d.data()))
},
}
そして一つ決まりがあってそれはこのjsファイルは、stateとmutationとactionsをexportするのがきまりってことです!
詳しい説明はいったん置いといて、この3つ絶対export必要ってことだけ覚えといてください!!
あとがき
あとは以下のことも分かりました。
すみません完全に走り書きです。
↓のことはのちのち記事にします!!
[アクセス制御をやりたい場合]
nuxt.jsでナビゲーションガードはむり。
やるならmountedでv-ifでユーザー認証をした方がいい。
大規模な開発ならlayoutできちんとやった（mountedでv-ifでnuxtタブごと消すと良い）ほうがいい。