mesqueeb / vuex-easy-firestore

Easy coupling of firestore and a vuex module. 2-way sync with 0 boilerplate!
https://mesqueeb.github.io/vuex-easy-firestore
MIT License
234 stars 28 forks source link

Use mapGetters/mapActions/mapMutations #338

Closed adamb closed 4 years ago

adamb commented 4 years ago

I have created a module called partnerDataModule but I can't figure out how to access the data now in my .vue file. Before I put things into VEF I could just use user but now that doesn't seem to work.

(Sorry I don't know how to label this "help wanted"..

 computed: {
    // map `this.user` to `this.$store.getters.user`
    ...mapGetters({
      user: "partnerData/user"
    })
mesqueeb commented 4 years ago

I don't believe you can use mapGetters. See: https://github.com/mesqueeb/vuex-easy-firestore/issues/237

I never found out why exactly this caveat is happening, but will be irrelevant in next version.

Sorry for the trouble! 😅

Please also note that VEF is not compatible with NUXT/SSR and also not usable in strict mode. All features I'd greatly appreciate any help for. 😉

--
Vuex Easy Firestore was made with ♥ by Luca Ban.
If you use this library in your projects, you can support the maintenance of this library by a small contribution via Github 💜.
You can also reach out on twitter if you want a one-on-one coding review/lesson. 🦜

louisameline commented 4 years ago

And mapGetters will most likely be deprecated in the next version of Vuex.

adamb commented 4 years ago

Sorry, so then dumb question, how do I access the store? this.$store.getters.user for a regular store. But how do I access a vef store? this.$store.partnerData.getters.user where I set the moduleName to partnerData in the data module config file? Tried that but no joy..

Would be great if the code had a simple example so a noob like me could see how to configure it and actually use the data, update it and read it, etc.

louisameline commented 4 years ago

Actually, Vuex-easy-firestore just helps you get the data into Vuex, but your store is just a regular Vuex store really. Can you please share the code where you declare your users module?

adamb commented 4 years ago

I renamed it clientData actually. But here is the module.

In my App.vue, how do I access the data from my clients stored in Firestore clients collection?

Thanks for the help!

// ~store/modules/clientDataModule.js

    firestorePath: 'clients',
    firestoreRefType: 'collection', // or 'doc'
    moduleName: 'clientData',
    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: {},
  }const clientDataModule = {

  export default clientDataModule
louisameline commented 4 years ago

With $store.state.clientData.data. Of course, it will be empty unless you fill it locally or load from remote.

louisameline commented 4 years ago

I'll close this as there is another ticket about map helpers, and that we are focusing on other issues for the time being. Thank you.