javascript - Load state with async action Vuex - Stack Overflow

admin管理员组

文章数量:1022525

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

Share Improve this question Follow asked Oct 5, 2018 at 14:27 AtarC5AtarC5 41322 gold badges1212 silver badges3030 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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
  }
}

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

Share Improve this question Follow asked Oct 5, 2018 at 14:27 AtarC5AtarC5 41322 gold badges1212 silver badges3030 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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
  }
}

本文标签： javascriptLoad state with async action VuexStack Overflow