Vue, Vuex and empty state

Question

Good morning everyone.

I have been struggling for several days on an app I'm trying to build for some experience. I have done quite a lot but am now stuck in the edit page as I just cannot grasp the state management side.

So here is my problem.

I have a button in my ProfilePage.vue that if I click on it sends me to the EditInvoice.vue page.

<button @click="onSubmit"><router-link to="/edit-invoice">Edit</router-link></button>

my store.js state:

state: {
    invoice: [],
  },

Then in my store.js, I have the following in my actions:

actions: {
      invoiceCollection({commit}) {
        database.collection('invoices')
          .get()
          .then((querySnapShot) => {
            querySnapShot.forEach((doc) => {

              const curInvData = doc.data();

              commit('invoice', curInvData);

              })
          })
      }
  },

This action gets the data I need from firestore and should look like this.

clientDetails: "Adress"
dateCreated: "September 15th 2019"
invoice: Array(2)
invoiceSubTotal: "R 167,50"
invoiceTotal: (...)
itemPaid: (...)
userId: (...)
userName: (...)

I then mutate my state (store.js):

mutations: {
    invoice: (state, payload) => state.invoice = payload,
  },

and then use a getter (store.js):

getters: {
    // Get Invoice data from state
    invoice: state =>  {
      return state.invoice
    },
  },

I then import mapGetters into my component (EditInvoice.vue) ...iterate through my getter's under my computed property with ...mapGetters(['invoice']),

and then use a simple function with a console log and use a lifecycle hook.

created() {
   this.currentInvoice();
  },
methods: {
   ...mapActions(['invoiceCollection']),

currentInvoice() {
   console.log(this.invoice)
 },

I'm very new to programming and would just like to know, why my getters, and everything else always returns an empty Observer

[__ob__: Observer]
length: 0
__ob__: Observer {value: Array(0), dep: Dep, vmCount: 0}
__proto__: Array

on the first few attempts. And then after a few clicks on the edit button in ProfilePage.vue eventually shows the right data

I have been searching for the same issue and have found several cases but none have helped me. This is a simplified version that I stripped. All I want to know is why my state is not persistent. The data is there it's just not showing on the first or second-page load.

Any help will be greatly appreciated.

it's probably because your data from firebase isn't loaded yet. Try to use a ...mapState instead of a ...mapGetter in the computed section of your component. — PeeJee
Hi PeeJee. Thank you for your reply. But I have tried it all. As I said it's a very simplistic layout at the moment as I have ran out of ideas. Nothin I do changes the fact that the first clean load, regardless if it's directly from the state or getters always returns empty on the first and maybe the second load. My Actions is asynchronous and I change my state with my mutations. but why is my state always [ob: Observer] I even logged it out in my App.vue before anything loads and I still return [ob: Observer] — John'Sters
No problem. What if you change the commit in your action to something like this: commit('invoice', snap.forEach(doc => doc.data())) — PeeJee
That gives me undefined. What really boggles my mind is that the data in my action always shows right if I console.log doc.data() in my promise. It takes a second or so but it shows... — John'Sters
Is it possible to make a JSFiddle or send me a repo? Its hard to debug this way. — PeeJee

Vishal Arpit Kumar Vishal Arpit Kumar · Accepted Answer · 2020-02-06T15:20:09

You are using this.currentInvoice(); in created method, created method run when component is created (not even mounted) so nothing has run, try running this.currentInvoice(); in mounted or beforeUpdate life cycle method.

Also go through this: Vue Js Life Cycle Methods

Vue, Vuex and empty state

1 Answers