posva / vuexfire

Check
https://github.com/vuejs/vuefire
MIT License
558 stars 49 forks source link

Not enough documentation #131

Closed dodanex closed 6 years ago

dodanex commented 6 years ago

As a beginner I can't get started implementing vuexfire because there's not enough documentation.

I have an Vue 2.5 webpack installation and using vue single file components.

store.js:

import Vue from 'vue'
import Vuex from 'vuex'
import * as VuexFire from 'vuexfire'

Vue.use(Vuex)
Vue.use(VuexFire)

export default new Vuex.Store({
  state: {
    products: []
  },
  mutations: VuexFire.firebaseMutations,
  getters: {
    products: state => state.products
  },
  actions: {
    setProductsRef: VuexFire.firebaseAction(({
       bindFirebaseRef
    }, ref) => {
      bindFirebaseRef('products', ref)
    })
  }
})

main.js:

// import vue
import Vue from 'vue'
// import app.vue file
import App from './App'

// import firebase
import * as firebase from 'firebase'

// import the router
import router from './router.js'
// import the store
import store from './store.js'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App },
  // move this to config.js...
  created () {
    firebase.initializeApp({
      apiKey: 'secretcontent',
      authDomain: 'secretcontent',
      databaseURL: 'secretcontent',
      projectId: 'secretcontent',
      storageBucket: 'secretcontent'
    })
  }
})

Products.vue:

<template>
    <div>
        <h1>Products</h1>
        <table>
            <thead>
                <tr>
                    <th>Tile</th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Currency</th>
                    <th>Action</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="item in products">
                    <td>{{ item.title }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ item.quantity }}</td>
                    <td>{{ item.currency }}</td>
                    <td><button>X</button></td>
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script>
  export default {
    computed: Vuex.mapGetters(['products']),
    data () {
      return {

      }
    },
    methods: {
      // test
    },
    created () {
      this.$store.dispatch('setProductsRef', productsRef)
    }
  }
</script>

What else do I need to setup ?

posva commented 6 years ago

There is no vue.use(Vuexfire), I think that's what you're missing. To be honest, there's not much to say, vuexfire is fairly simple, It exports 2 things firebaseMutations and firebaseAction, so https://github.com/posva/vuexfire#usage is enough to get started. I'll add more things on the future #28 but it's mainly aimed at big projects