I can't realize how to get it works.

I'm trying to load a propertie (productos) on my data() which has to catch the value from a state.

My ponent:

    data () {
        return {
          productos: this.$store.state.mStock.productos
        }
     },
  created() {
    this.$store.dispatch('fetchProductos')
  }

At this point i think it's okay, when i load my ponent i dispatch my action to load the state on the store. I think the problem is that the way i fill the state is ASYNC

Store:

import StockService from '@/services/StockService'

export const moduleStock = {
  strict: false,
  state: {
    productos: []
  },
  mutations: {
    setProductos (state, payload) {
      state.productos = payload.productos
    }
  },
  actions: {
    async fetchProductos ({mit}, payload) {
      const resp = await (StockService.getProductos())
      var productos = resp.data
      mit('setProductos', {productos: productos})
    }
  }
}

When i load my ponent, the propertie "productos" on the data() is null, however if i see the 'state.productos' from the Vuex devtools, it has the data!

I'm messed up.

I can't realize how to get it works.

I'm trying to load a propertie (productos) on my data() which has to catch the value from a state.

My ponent:

    data () {
        return {
          productos: this.$store.state.mStock.productos
        }
     },
  created() {
    this.$store.dispatch('fetchProductos')
  }

At this point i think it's okay, when i load my ponent i dispatch my action to load the state on the store. I think the problem is that the way i fill the state is ASYNC

Store:

import StockService from '@/services/StockService'

export const moduleStock = {
  strict: false,
  state: {
    productos: []
  },
  mutations: {
    setProductos (state, payload) {
      state.productos = payload.productos
    }
  },
  actions: {
    async fetchProductos ({mit}, payload) {
      const resp = await (StockService.getProductos())
      var productos = resp.data
      mit('setProductos', {productos: productos})
    }
  }
}

When i load my ponent, the propertie "productos" on the data() is null, however if i see the 'state.productos' from the Vuex devtools, it has the data!

I'm messed up.

• javascript
• asynchronous
• vue.js
• async-await
• vuex

• Use productos as a puted property, not in data(). – Bennett Dams Commented Oct 5, 2018 at 14:32

1 Answer 1

The data() method is only run once.

This might seem to work if when the ponent and the vue store use the same object instance, but doesn't work in this case because a new array instance is assigned in the store while the ponent stil has the previous instance (the empty array)

Use puted properties. I remend using the mapState() helper:

puted: mapState({
  productos: state => state.mStock.productos
})

without mapState you'd write:

puted: {
  productos() {
    return this.$store.state.mStock.productos
  }
}