【Nuxt.js】Nuxt実践編：v-model + Vuex + firebase

前置き

v-modelで直接storeを書き換えて
それをfirebaseへ送信してみます📤

ですが実際に使う場面はほぼありません😂笑

というのも、
firebaseを使って入力した値を送信さえできれば良いからです。
取得も簡単にできるので
わざわざVuexを使ってstoreに保存する必要がないのです…！

なので
仕組みを見て「ふーんなるほど💡」と
分かってもらえたら良いなと思います🍒👌

v-model, computed, vuex, firesbase(firestore)の
解説記事を読んだ方なら、
当たり前じゃん❗️
と思うかもしれません！
それぞれの解説記事もあるので
リンクを貼っておきます🎈🧸

⬇️解説記事はこちら
v-model: https://wp.me/pc9NHC-kI
computed: https://wp.me/pc9NHC-wY
Vuex: https://wp.me/pc9NHC-gl　https://wp.me/pc9NHC-dH
firestore: https://wp.me/pc9NHC-g4

完成コード

まずは完成コードからお見せしちゃいます🌟
この後に、ここに至るまでの考え方などを書いていきます。
そちらを見ながらやってみてください🔥💪

firestoreとの連携などは前置きリンクからご覧ください👀

) file

import firebase from "firebase/app"
import 'firebase/firestore'

if (!firebase.apps.length) {
 firebase.initializeApp({
  apiKey: "貼り付け",
  authDomain: "貼り付け",
  databaseURL: "貼り付け",
  projectId: "貼り付け",
  storageBucket: "貼り付け",
  messagingSenderId: "貼り付け",
  appId: "貼り付け",
  measurementId: "貼り付け"
 })
}

export default firebase

import firebase from "firebase/app"

import 'firebase/firestore'

if (!firebase.apps.length) {

firebase.initializeApp({

apiKey: "貼り付け",

authDomain: "貼り付け",

databaseURL: "貼り付け",

projectId: "貼り付け",

storageBucket: "貼り付け",

messagingSenderId: "貼り付け",

appId: "貼り付け",

measurementId: "貼り付け"

})

}

export default firebase

) pages

<template>
 <div class="page">
   <input
     type="text"
     v-model="name"
   >
   <input
     type="text"
     v-model="email"
   >
   <p>{{ name }} {{ email }}</p>
   <button @click="submit">submit</button>
 </div>
</template>

<script>
export default {
 computed: {
   name: {
     get() {
       return this.$store.getters['name']
     },
     set(value) {
       this.$store.commit('updateName', value)
     },
   },
   email: {
     get() {
       return this.$store.getters['email']
     },
     set(value) {
       this.$store.commit('updateEmail', value)
     },
   },
 },
 methods: {
   submit () {
     this.$store.dispatch('submit')
   }
 },
}
</script>

<input

type="text"

v-model="name"

<input

type="text"

v-model="email"

<p>{{ name }} {{ email }}</p>

<button @click="submit">submit</button>

</div>

</template>

export default {

computed: {

get() {

return this.$store.getters['name']

set(value) {

this.$store.commit('updateName', value)

email: {

get() {

return this.$store.getters['email']

set(value) {

this.$store.commit('updateEmail', value)

methods: {

submit () {

this.$store.dispatch('submit')

}

</script>

) file

import firebase from '@/plugins/firebase'

export const state = () => ({
 name: "名前",
 email: "email",
})

export const getters = {
 name: state => {
   return state.name
 },
 email: state => {
   return state.email
 },
}

export const actions = {
 submit ({ state }) {
   const db = firebase.firestore()
   let dbUsers = db.collection('users')
   dbUsers
     .add({
       name: state.name,
       email: state.email,
     })
     .then(ref => {
       console.log('Add ID: ', ref.id)
     })
 },
}

export const mutations = {
 updateName(state, newName) {
   state.name = newName
 },
 updateEmail(state, newEmail) {
   state.email = newEmail
 },
}

import firebase from '@/plugins/firebase'

export const state = () => ({

email: "email",

})

export const getters = {

return state.name

email: state => {

return state.email

}

export const actions = {

submit ({ state }) {

const db = firebase.firestore()

let dbUsers = db.collection('users')

dbUsers

.add({

email: state.email,

})

.then(ref => {

console.log('Add ID: ', ref.id)

})

}

export const mutations = {

updateName(state, newName) {

state.name = newName

updateEmail(state, newEmail) {

state.email = newEmail

}

経緯

それでは解説をしていきます💡

【参考記事】
https://designsupply-web.com/knowledgeside/4884/

Step1: まずはinputをv-modelで作る

v-modelでdataのnameと紐付けます。

コード

) pages

<template>
 <div class="page">
   <input
     type="text"
     v-model="name"
   >
   <p>
     {{ name }}
   </p>
 </div>
</template>

<script>
export default {
 data () {
   return {
     name: '変えたい'
   }
 },
}
</script>

<input

type="text"

v-model="name"

<p>

</p>

</div>

</template>

export default {

data () {

return {

}

</script>

Step2: v-modelで直接stateと紐づける

inputをいじった瞬間にエラーがでます。
stateの値はmutationsでしか変更できないからですね。

Error

[vuex] do not mutate vuex store state outside mutation handlers.

コード

) pages

<template>
 <div class="page">
   <input
     type="text"
     v-model="$store.state.name"
   >
   <p>
     {{ name }}
   </p>
 </div>
</template>

<script>
export default {
 computed: {
   name () {
     return this.$store.getters['name']
   },
 },
}
</script>

<input

type="text"

v-model="$store.state.name"

<p>

</p>

</div>

</template>

export default {

computed: {

name () {

return this.$store.getters['name']

}

</script>

) file

export const state = () => ({
  name: "state内name",
})

export const getters = {
  name(state) {
    return state.name
  },
}

export const state = () => ({

})

export const getters = {

name(state) {

return state.name

}

Step3: mutationsでstateを変える

書き換えができていますね🌟

@inputで値を入力した時に
mutationsでstateを書き換えます。

ただv-model自体に@inputとv-bindが含まれているので
@inputが重複していて変な感じがしますね。

コード

) pages

<template>
 <div class="page">
   <input
     type="text"
     v-model="name"
     @input="inputText"
   >
   <p>
     {{ name }}
   </p>
 </div>
</template>

<script>
export default {
 data () {
   return {
     name: "default"
   }
 },
// computed: {
//   newName () {
//     return this.$store.getters['name']
//   },
// },
 methods: {
   inputText () {
     this.$store.commit('update', this.name)
   },
 },
}
</script>

<input

type="text"

v-model="name"

@input="inputText"

<p>

</p>

</div>

</template>

export default {

data () {

return {

}

// computed: {

// newName () {

// return this.$store.getters['name']

// },

methods: {

inputText () {

this.$store.commit('update', this.name)

}

</script>

) file

export const state = () => ({
 name: "変えたい",
})

export const getters = {
 name: state => {
   return state.name
 },
}

export const mutations = {
 update(state, newName) {
   state.name = newName
 },
}

export const state = () => ({

})

export const getters = {

return state.name

}

export const mutations = {

update(state, newName) {

state.name = newName

}

Step4: スマートにgetter関数とsetter関数を使う

v-modelもdataも一緒にcomputedで
get, setすれば良いですね🌟

コード

) pages

<template>
 <div class="page">
   <input
     type="text"
     v-model="name"
   >
   <p>
     {{ name }}
   </p>
 </div>
</template>
<script>
export default {
 computed: {
   name: {
     get() {
       return this.$store.getters['name']
     },
     set(value) {
       this.$store.commit('update', value)
     },
   }
 },
}
</script>

<input

type="text"

v-model="name"

<p>

</p>

</div>

</template>

export default {

computed: {

get() {

return this.$store.getters['name']

set(value) {

this.$store.commit('update', value)

}

</script>

) file

export const state = () => ({
 name: "変えたい",
})

export const getters = {
 name: state => {
   return state.name
 },
}

export const mutations = {
 update(state, newName) {
   state.name = newName
 },
}

export const state = () => ({

})

export const getters = {

return state.name

}

export const mutations = {

update(state, newName) {

state.name = newName

}

Step5: firebaseの関数を追加して完成！

送信ボタンを追加して、
firestoreへ送信するだけです📤
firebaseの関数はfirestoreの記事をご確認ください👀

まとめ

いかがでしたか？
いままでの記事を参考に
復習になったかと思います✨

躓いた部分があれば、
それぞれの解説記事で
マスターしていきましょう❤️💪