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