Comments (19)
@januszj This is exactly right. I'm actually planning a short demo app with video explanation. I already started the simple design for it. I think i'll release it in a week or two.
Vuex Easy Firestore was made with β₯ by Luca Ban.
If this library helped you in any way you can support me by buying me a cup of coffee.
from vuex-easy-firestore.
Hey, thnx for all the hard work! But for now, how about just supplying the demo app under a /demo directory or somewhere else(?). It be a great help - esp. a lot of us who are not getting how to even start with this (eg the config). Also, I thought Firestore has now fully implemented enablePersistence()
across all devices - including Web??
from vuex-easy-firestore.
Not sure if it's kosher to post on his behalf but I have an app that's public which demonstrates using and auth: https://gitlab.com/bpkennedy/kenshi-journal
from vuex-easy-firestore.
@preginald You can always open issues to ask me how to do something! π
Advice for new comers
I would anyone who's new to Vuex or to Firebase's JS SDK to first get some experience with it, see how you can manually implement (1) retrieving docs, (2) placing them inside a vuex module and (3) saving changes back to vuex & firestore simultaneously.
Manually writing all this logic is what I kept doing in all my apps, that's why I decided to turn it into a library. π However, I can see that for newer devs (at least new to vuex / firebase js sdk) it can be daunting to understand what makes this library great.
As for your question:
I couldn't figure out how to return a single product
It depends on your implementation really.
method 1: fetchById
If you have several products in a single Firestore "collection" and you need to load them just one by one as the user opens the page with the product (and document) id, you could use the fetchById action I made.
dispatch('products/fetchById', routeId)
BTW this is documented under "read data" > "fetching docs". See the section called "Fetching in 'collection' mode"
.
method 2: fetchAndAdd
If however, the product ID is not the same as the document ID in Firestore, like your "series_id" then you'll have to use this instead:
dispatch('products/fetchAndAdd', {where: [['series_id', '==', routeId]]})
In this case, Firebase will throw an error that you need to set up an index, and it will show you a link to do so.
method 3: "doc" mode
You could also use "doc" mode with a pathVariable for the product ID, but that's not possible in your case with a separate "series_id". Also I'd advise against this because "doc" mode is more suited for a single document like "user settings" etc.
Let me know if there's anything I can help you with!
--
Vuex Easy Firestore was made with β₯ by Luca Ban.
If this library helped you in any way you can support me by buying me a cup of coffee.
from vuex-easy-firestore.
Wow, 2 month later and still no demo app. :-(
from vuex-easy-firestore.
@preginald Sorry for the late response.
dispatch('_myModule_/openDBChannel')
can go anywhere you want. If you want to "retrieve your doc(s)" you can dispatch this.
Examples:
- on
created()
inside a vue file - After initialising your firebase and store instances
- When the user clicks a button
from vuex-easy-firestore.
@preginald edited your post to add syntax highlighting.
Please remember to write "js" or "html" or "vue" behind the three dashes to add syntax highlighting
eg βγ```js
from vuex-easy-firestore.
@Sitarman You can get the data in any other view directly from the store:
computed: {
products() {
return Object.values(this.$store.state.productsModule.data)
},
clients() {
return Object.values(this.$store.state.clientsModule.data)
},
},
from vuex-easy-firestore.
I'd also add that, in my opinion, using this library with Vuex/Firestore feels pretty close to using an ORM, as far as underlying complexity it is trying to make magical for you (take "magical" for what you will).
It is not quite as complex as Ember's ember-data ORM, and it's got an friendlier API. Also, it's a bit niche in that there isn't a whole lot of ORM tooling for nosql.
Although there were a couple things I worked through, my experience was definitely more pleasure than pain. If I was making another app that had no API (I.e went straight to firestore with http), I'd definitely use this again.
from vuex-easy-firestore.
Thanks @preginald for your post and the link to the demo sample app the fog began to lift after that and thanks to @pitw for 'return Object.values(this.$store.state.productsModule.data)'... so that is how it is done!!!
and @bpkennedy for your insight ,had a look at your Kenshi-journal app awesome piece of work and a master class for when I eventually come to terms with vuex and @mesqueeb your library is great I'm just not up to speed with vuex and cannot do it justice just yet but really appreciate your hard work . I'll have a good go this evening putting something together from what I have learnt so far.
from vuex-easy-firestore.
This would be a great help for getting into vuex-easy-firestore.
Please also include an example into demo app with firestore auth / querying user specific documents.
from vuex-easy-firestore.
Ok. I dont have enough hard drive real estate and my computer canβt currently handle filming my screen and webcam all at once it seems lol.
Itβll take a bit longer before i get the video out because i wanna get it right.
Please do in the mean time ask anything. Even simple questions are ok. I will do my best to help. Feel free to open issues.
Vuex Easy Firestore was made with β₯ by Luca Ban.
If this library helped you in any way you can support me by buying me a cup of coffee.
from vuex-easy-firestore.
Thanks! It's just to get an idea how to connect to firestore. Thanks a lot :-)
from vuex-easy-firestore.
Not sure if it's kosher to post on his behalf but I have an app that's public which demonstrates using and auth: https://gitlab.com/bpkennedy/kenshi-journal
Hey @bpkennedy I took a look at your code and was lost as I couldn't find any reference to dispatch('myModule/openDBChannel')
I want to do is return all documents inside a collection called contests
.
I've already created the store module called contest.js that contains the following:
const contests = {
firestorePath: 'contests',
firestoreRefType: 'collection', // or 'doc'
moduleName: 'contestsData',
statePropName: 'contests',
namespaced: true, // automatically added
// this object is your store module (will be added as '/myModule')
// you can also add state/getters/mutations/actions
state: {},
getters: {},
mutations: {},
actions: {}
};
export default contests;
In my case where would the dispatch('_myModule_/openDBChannel')
go?
Cheers
from vuex-easy-firestore.
Hey @bpkennedy and everyone, I've managed to get it working. I referred to the sample app here https://github.com/mesqueeb/vuex-easy-firestore-sample-app
from vuex-easy-firestore.
@preginald Sorry for the late response.
Thanks for responding @mesqueeb
This is an example of how I managed to get all docs
in a collection
firebase.js
import * as Firebase from 'firebase/app';
import 'firebase/firestore';
const config = {
apiKey: 'Abracadabra-alakazam',
authDomain: 'mosportive-8f059.firebaseapp.com',
databaseURL: 'https://mosportive-8f059.firebaseio.com',
projectId: 'mosportive-8f059',
storageBucket: 'mosportive-8f059.appspot.com',
messagingSenderId: '007'
};
function initFirebase() {
Firebase.initializeApp(config);
return new Promise((resolve, reject) => {
Firebase.firestore()
.enablePersistence()
.then(resolve)
.catch(err => {
if (err.code === 'failed-precondition') {
reject(err);
// Multiple tabs open, persistence can only be
// enabled in one tab at a a time.
} else if (err.code === 'unimplemented') {
reject(err);
// The current browser does not support all of
// the features required to enable persistence
}
});
});
}
export { Firebase, initFirebase };
store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import createEasyFirestore from 'vuex-easy-firestore';
Vue.use(Vuex);
import { Firebase, initFirebase } from '@/helpers/firebase.js';
import contests from './contests';
import events from './events';
const easyFirestore = createEasyFirestore([contests, events], {
logging: true,
FirebaseDependency: Firebase
});
// include as PLUGIN in your vuex store:
const storeData = {
// ... your store
plugins: [easyFirestore]
};
const store = new Vuex.Store(storeData);
// initFirebase
initFirebase().catch(error => {
// take user to a page stating an error occurred
// (might be a connection error, or the app is open in another tab)
alert(error);
});
export default store;
contest.js
const contests = {
firestorePath: 'contests',
firestoreRefType: 'collection', // or 'doc'
moduleName: 'contests',
statePropName: 'data',
namespaced: true, // automatically added
// this object is your store module (will be added as '/myModule')
// you can also add state/getters/mutations/actions
state: {},
getters: {},
mutations: {},
actions: {}
};
export default contests;
Contests.vue
<template>
<v-container>
<v-layout>
<v-flex>
<h1>Contests</h1>
<ul>
<li v-for="contest in $store.state.contests.data" :key="contest.id">{{ contest.name }}</li>
</ul>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
mounted() {
this.$store.dispatch("contests/openDBChannel");
}
// ...
}
</script>
from vuex-easy-firestore.
Hello Guys,
Great to see a few pointers thanks @preginald and of course @mesqueeb I did not realise you add to append 'this.$store' to dispatch('example'/openDBChannel). Any chance of a few more simple examples like this? For example sending data to firestore and being able to retrieve the data in any other view would get me started.
Cheers Guys
from vuex-easy-firestore.
I'm so glad that @Sitarman asked that question. Thank you @pitw for responding. I've just finished completely removing all code related to vuex-easy-firestore because I found gaps in knowledge.
I've got decades of experience as a backend dev but it's been a steep learning curve learning Vue framework and Vuex/state management, I often stop myself from asking questions because they seem very simple in nature.
Eg. I couldn't figure out how to return a single product where("series_id"), "==", "this.$route.params.id")
I know how to achieve this with vanilla js or with vuefire in minutes but it becomes frustrating when something that should take seconds takes hours.
For now I'll clone my project and use vuex-easy-firestore and slowly build it as gain more knowledge.
Thanks for your patience and hardwork everyone.
from vuex-easy-firestore.
After about two years of open source, I finally got accepted for Github Sponsors!
π github.com/sponsors/mesqueeb π
A little about me:
- I love open-source
- 6 months ago I got a son, and am trying to be an awesome father π
- I'm doing freelance work here and there as my main job
If anyone was helped with vuex-easy-firestore, I'd greatly appreciate any support!
BTW, donations get's paid DOUBLE by GitHub! (they're alchemists... π¦Ύ)
Going forward π¨πΌβπ»
- I got great plans for the future of vuex-easy-firestore going above and beyond!! Look forward to it!!
- On to many more years of open-sourcing! π
from vuex-easy-firestore.
Related Issues (20)
- cannot read resolve of undefined HOT 7
- Feature: Add firestore.getAll() on the web HOT 7
- Question: can we rely on the `signedIn` getter to check if the user is signed in? HOT 3
- Guard 'id' will still add 'id' on update HOT 1
- Reacting to changes in vue-router HOT 1
- Retrieve subcollections together with document HOT 2
- feat(docs): add firestore guide
- RangeError: Maximum call stack size exceeded HOT 6
- ProjectId not provided in firebase.initializeApp despite being provided HOT 3
- Can't get it to work no matter what! HOT 6
- Two-way binding HOT 4
- Getters undefined when working with users collection + sign in onAuthStateChanged [Help]
- fetch only returns id in doc HOT 2
- Update library for firebase v9 HOT 3
- Adding "in" or "array-contains" to the where clause
- setPathVars should be better documented HOT 1
- Doc insertion from multiple apps at he same index
- project build process HOT 1
- E2E test with Cypress
- syncStack / rejects HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuex-easy-firestore.