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

🎈 この記事はWP専用です
https://wp.me/pc9NHC-yW

前置き

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との連携などは前置きリンクからご覧ください👀

plugin.firebase.js

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

index.vue

<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>

store.index.js

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
 },
}

経緯

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

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-yW