12
7

More than 5 years have passed since last update.

VuexFireを使おうと過去のサンプルをコピペしたらはまった話

Posted at

TL;DR

決してそのサンプルが悪いのではなく変更履歴を見なかった自分が悪いのです。
https://github.com/vuejs/vuefire/blob/master/CHANGELOG.md
ここを読めばすべてが解決します。

経緯

nuxt + firebaseのサンプルアプリを作ろうと適当な記事をコピペして自分用に変更した。
vuex部分

import firebase from '@/plugins/firebase';
import { firebaseMutations, firebaseAction } from 'vuexfire'

const db = firebase.database();

export const state = () => ({
  users: [],
});

export const mutations = {
  ...firebaseMutations,
};

export const getters = {
  getUsers: state => {
    return state.users;
  },
};

export const actions = {
  init: firebaseAction(({ bindFirebaseRef }, usersRef) => {
    bindFirebaseRef('users', usersRef);
  }),
};

これだと

"export 'firebaseMutations' was not found in 'vuexfire'

こんな感じで怒られる

解決

githubにissueがある
https://github.com/vuejs/vuefire/issues/252

変更履歴を見ろ以上
抜粋すると以下

vuexfire: Renamed firebaseAction to firestoreAction as well as the two added function bindFirebaseRef and unbindFirebaseRef to bindFirestoreRef and unbindFirestoreRef. This is to enable using both RTDB and Cloud Firestore
vuexfire: Rename bindFirebaseRef to bindFirestoreRef and unbindFirebaseRef to unbindFirestoreRef to allow using them for RTDB
vuexfire: Rename firebaseMutations into vuexfireMutations. Rename firebaseAction into firestoreAction since we want to allow using RTDB as well and that name will be used for the firebaseAction as well
vuefire: the default export is replaced by a named export to make it clearer what you are importing from vuefire: Cloud Firestore or RTDB. Replace import Vuefire from 'vuefire' by import { firestorePlugin } from 'vuefire' and update the plugin installation: Vue.use(firestorePlugin)

要は名前を変えたというだけ
今回の使用versionは

"vuexfire": "^3.0.1"

なので該当。

以下のように書き換える


import firebase from '@/plugins/firebase';
+import {vuexfireMutations, firestoreAction } from 'vuexfire';
-import { firebaseMutations, firebaseAction } from 'vuexfire'
const db = firebase.database();

export const state = () => ({
  users: [],
});

export const mutations = {
+  ...vuexfireMutations,
-  ...firebaseMutations,
};

export const getters = {
  getUsers: state => {
    return state.users;
  },
};

export const actions = {
+  init: firestoreAction(({bindFirestoreRef}, usersRef) => {-
-  init: firebaseAction(({ bindFirebaseRef }, usersRef) => {
+    bindFirestoreRef('users', usersRef);
-    bindFirebaseRef('users', usersRef);
  }),
};

12
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
7