vuexfire@next not binding collections

[CalebKester]

Versions

"firebase": "^8.2.4",
"vue": "^3.0.5",
"vue-router": "^4.0.3",
"vuefire": "^3.0.0-alpha.2",
"vuex": "^4.0.0-rc.2",
"vuexfire": "^3.2.0-alpha.0"

Reproduction

https://codesandbox.io/s/little-glade-n494s?file=/src/store.js:588-593

Steps to reproduce the behavior

1. Go to https://codesandbox.io/s/little-glade-n494s?file=/src/store.js:588-593
2. Click on "Create One"
3. You won't see todos being updated.

Expected behavior

When I bind a collection and add an item, i should see the new item in my list.

Actual behavior

I can see a new item being added in my firebase console. But when I go back to vue it is not there. On my local machine I have to refresh the page. It will not auto update.

Additional information

I do not know why I can't even get the firestore binding to work in this example. My issue i'm trying to replicate is when I add a todo to todos, my todos computed value does not update. On my machine I'm working with vite but I decided to do a code sandbox to make it easier for you to debug. I can create a git repo of that works better with my vite code as well.

[posva]

in the next version of vuefire there is no need of vuexfire (in fact the version you are using is an outdated version of vuexfire). But there isn't yet all the necessary imports to make things work with Vuex 4 (with mutations). The vuexfireMutations and firestoreAction()/rtdbAction() still need to be exposed

However, the existing version works with any Ref with firestoreBind() and sholud work with Vuex 5 and pinia out of the box

[CalebKester]

Thanks @posva . I'll look forward to seeing the formal version of vuefire come out for vue3. I tried poking around https://github.com/vuejs/vuefire/blob/v3/examples/firestore.html#L73 but was coming up with DependencyNotFoundError Could not find dependency: '@vue/composition-api' relative to '/node_modules/vue-demi/lib/v2/index.esm.js' https://codesandbox.io/s/kind-paper-qcqh9?file=/src/main.js

No worries though I'll wait until vuefire is fully supported or wait for some pinia examples. Thanks for all the work you do!

[mehmetkursataydin]

I need this today. Damn I have no other choice but to eliminate Vuexfire and do things manually it seems. I hope this gets fixed asap, so I can add into the project in future before I have to build more.

[spencercap]

@posva thanks for starting on the vue 3 version! FYI firestoreUnbind (tested for a single document) doesnt work either, it remains bound.

[lexxwork]

Hey, I have made small investigation debugging dist/viexfire.esm.js, and found that while binding to array at rtdbBindAsArray every time we use the local var

const array: any[] = options.wait ? [] : ops.set(vm, key, [])

And every time we react on firebase event, we pass that variable as 'target' parameter:

ops.add(array, index, options.serialize(snapshot))

Instead we should send

• a state as 'target' or resolved state object or path/key to it as we do in 'set' function
• or use a state inside mutation function and key/path to it and resolve it at that place

Also when we use 'wait' option it should brake the logic

• again we use that 'array' but should use 'data.val()'
• we should consider priority to 'once value' event in case we use 'wait' option and only after subscribe to 'child_aded/removed' events

I think the same thing is going for collections

Lately i can make a contibution to code but don't know how to do that properly.

TL;DR: we should refactor/'create new' functions 'rtdbBindAsArray' and 'bindCollection' to make it work with vuex

[scriptPilot]

Is there any update on Vue 3 / Vuex 4 support?

[shadhin-msa]

@posva going through same problem, is there any solution / update or anything

[Hibrix-net]

Hi all,

It seems that the developer lacks of enough funding to support this project as far as I read from other issues, but at the same time there's an urgent need from the community to at least make Vuexfire to work with Vuex 4 and of course to continue supporting this massively used solution.

I believe that many people have the same problem as me: an entire application based on Vuexfire that cannot be updated to Vuex 3 for that reason.

@posva please give us some support. Think on those of us who have entrusted this solution from the first time. We may also start a fundraising campaign to help you with that. There's a lot of projects running with Vuexfire out there and there's also a lot of effort and money invested in them.

Kind regards,

[Hibrix-net]

I just found a fork here that supports vuex 4 / vue 3 http://vuejscomponent.com/xquick-codevuexfire

I tried and that seems to work well.

There's also a pull request referring to that: https://github.com/vuejs/vuefire/pull/1040/files

So the changes to make Vuexfire to work with Vue 4 seems to be very minimalistic. It should be updated soon in my modest opinion.

Regards,

[shadhin-msa]

Awesome! its working thank you @Hibrix-net for sharing

[liquidvisual]

Would this fork work with Pinia easily?

[Hibrix-net]

Would this fork work with Pinia easily?

Pinia is not compatible with Vuexfire, it is a completely different concept and code. I don't know if there's any Firestore binding possibility for Pinia around there right now.

[liquidvisual]

Okay no worries, thanks for your help.

[posva]

This should be now documented at https://vuefire.vuejs.org/cookbook/subscriptions-external.html#pinia and https://vuefire.vuejs.org/cookbook/vuex.html

It's worth noting that the Firebase SDK internally implements a complex caching strategy and that if you are using the store to preserve the data between navigation, it really isn't necessary, you can call useDocument() with the same document in different components and the Firebase SDK handles the caching and everything