vue.js
Firebase
nuxt.js
VuexFire

Nuxt×vuexfireでちょっとハマった


やりたかったこと


  • Nuxtで

  • storeをモジュールモードで

  • namespaceを利用して

  • vuexfireを使う


ハマったところ

store/index.jsにvuexfire関連の設定をしているサンプルはたくさんあったが、namespaceを利用してindex.js以外のファイルを使おうとした場合に、

[vuex] unknown mutation type: VUEXFIRE_ARRAY_INITIALIZE

[vuex] unknown mutation type: vuexfire/ARRAY_ADD

が出てしまった。

その時の設定例は以下の通り。(index.jsならうまく行くが、それ以外だと↑のエラーで怒られる)


store/index.js/other.js

import firebase from '@/plugins/firebase'

import { firebaseMutations, firebaseAction } from 'vuexfire'

const db = firebase.database()
const itemsRef = db.ref('items')

export const state = () => ({
items: []
})

export const mutations = {
...firebaseMutations
}

export const getters = {
items: state => {
return state.items
}
}

export const actions = {
init: firebaseAction(({ bindFirebaseRef }) => {
bindFirebaseRef('items', itemsRef)
})
}



解決策

ちゃんとREAMDEに記載されていた。。。

https://github.com/posva/vuexfire

スクリーンショット 2018-08-06 14.51.52.png

mutationsはrootに作れよ、と。

ということでmutaionsのみindex.jsへ。


store/index.js

import { firebaseMutations } from 'vuexfire'

export const mutations = {
...firebaseMutations
}



store/other.js

import firebase from '@/plugins/firebase'

import {firebaseAction } from 'vuexfire'

const db = firebase.database()
const itemsRef = db.ref('items')

export const state = () => ({
items: []
})

export const getters = {
items: state => {
return state.items
}
}

export const actions = {
init: firebaseAction(({ bindFirebaseRef }) => {
bindFirebaseRef('items', itemsRef)
})
}


これでエラーが解消され、やりたかったことがやれるようになった。


サンプル

こちら


教訓

ドキュメントを読め。

読んだつもりじゃなくて読め。