BETA

Vue.js + firestoreでCRUD操作を実現

投稿日:2020-01-28
最終更新:2020-01-28

firestoreでのCRUD操作をまとめます。
事前にfirestoreでコレクション(=テーブルみたいなもの)を作成しておいてください。

firebaseをインストール

「project overview」→「アプリを追加」→「Web」の順にクリックしてアプリを追加します。
アプリ名を入力すると、以下のような画面になるので、<script>タグの中をコピーしてください。

次にfirebaseをインストールします。
cdnから持ってくる方法が一番簡単ですが、今回はnpmでインストールすることにします。
インストール方法について、詳しくはこちらに書かれています。

package.json がある状態で以下のコマンドを実行してください。

$ npm i firebase  

次にコピーした内容をsrc/firebase/init.jsの中にペーストし、以下のように記述します。

import * as firebase from 'firebase/app'  
import 'firebase/firestore'  

// Your web app's Firebase configuration  
const firebaseConfig = {  
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',  
  authDomain: 'xxxxx-xxxxxx-xx-xxx.firebaseapp.com',  
  databaseURL: 'https://xxxxx-xxxxx-xx-xxx.firebaseapp.com',  
  storageBucket: 'xxxxx-xxxxxx-xxxx.appspot.com',  
  messagingSenderId: 'xxxxxxxxx',  
  appId: 'x:xxxxxxxx:web:xxxxxxxxxxxxxxxxxxxxxx',  
}  
// Initialize Firebase  
const firebaseApp = firebase.initializeApp(firebaseConfig)  

// export firestore database  
export default firebaseApp.firestore()  

今回はfirestoreだけを使うように設定しています。
これでfirebaseが使えるようになりました。

基本

@/firebase/initdbという名前でインポートしてfirebaseの機能を使っていきます。
db.collection('コレクション名')でコレクションを取得できます。

READ

get()で一覧を取得します。
then()以降で一つ一つのドキュメントをdocに格納し、data()でフィールドのデータ一覧を取得します。
idだけは取れないので、別で取得しています。
そして最後にitems配列にそれぞれ格納します。

<script>  
import db from '@/firebase/init'  

export default {  
  data() {  
    return {  
      items: [],  
    }  
  },  
  created() {  
    // fetch data from firestore  
    db.collection('items')  
      .get()  
      .then(snapshot => {  
        snapshot.forEach(doc => {  
          let item = doc.data()  
          item.id = doc.id  
          this.items.push(items)  
        })  
      })  
  },  
}  

またwhere()で検索して取得することもできます。

created() {  
  let ref = db  
    .collection('smoothies')  
    .where('slug', '==', this.$route.params.item_slug)  
  ref.get().then(snapshot => {  
    snapshot.forEach(doc => {  
      this.item = doc.data()  
      this.item.id = doc.id  
    })  
  })  
},  

CREATE

db.collection('items').addで追加します。
以下では、追加後にindexページにリダイレクトしてます。

<script>  
import db from '@/firebase/init'  

export default {  
  data() {  
    return {  
      title: null,  
      author: null,  
      tags: [],  
      slug: null,  
    }  
  },  
  methods: {  
    addItem() {  
      db.collection('items')  
        .add({  
          title: this.title,  
          author: this.author,  
          tags: this.tags,  
          slug: this.slug,  
        })  
        .then(() => {  
          this.$router.push({ name: 'Index' })  
        })  
        .catch(err => {  
          console.log(err)  
        })  
    },  
  },  
}  
</script>  

UPDATE

update()でフィールドの値を更新できます。

<script>  
import db from '@/firebase/init'  

export default {  
  data() {  
    return {  
      title: null,  
      author: null,  
      tags: [],  
      slug: slug,  
    }  
  },  
  methods: {  
    db.collection('items')  
      .doc(this.item.id)  
      .update({  
        title: this.title,  
        author: this.author,  
        tags: this.tags,  
        slug: this.smoothie.slug,  
      })  
      .then(() => {  
        this.$router.push({ name: 'Index' })  
      })  
      .catch(err => {  
        console.log(err)  
      })  
  },  
}  
</script>  

DESTROY

doc(ID)で指定のドキュメントを取得し、delete()で削除できます。

<script>  
import db from '@/firebase/init'  

export default {  
  data() {  
    return {  
      items: [],  
    }  
  },  
  methods: {  
    deleteItem(id) {  
      // delete docs from firestore  
      db.collection('items')  
        .doc(id)  
        .delete()  
        .then(() => {  
          this.items = this.items.filter(item => {  
            return item.id != id  
          })  
        })  
    },  
  },  
}  
</script>  

以上です。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

BЯunoの技術ブログ。日々学んだことを記録していくよ。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう