CODEWITHSUNDEEP
vue.jsnuxt.jsvuex
Mohammad
Mohammad

Reputation: 621

Why action of Vuex returns a promise<pending>?

I have an action in Vuex actions which commit a mutation that it take a payload from the component, that is a number of the index for returning an object, it works fine on Vuex js file meaning that shows the selected item on the console, as I said it gets index from the payload, but on the component, it gives me Promise <Pending>, why that's happening? for now, I do not use any API for my Nuxt/Vue app, but I will, and for now, I just want to know why this is happening and what is the best solution for solving this

Here my Vuex codes:

export const state = () => ({
  articles: [
    {
      uid: 0,
      img: 'https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/1.jpg',
      link: '/articles/1',
    },
    {
      uid: 1,
      img: 'https://raw.githubusercontent.com/muhammederdem/mini-player/master/img/2.jpg',
      link: '/articles/2',
    },
  ],
})
export const getters = {
  getArticles(state) {
    return state.articles
  },
}
export const mutations = {
  getSpeceficArticle(state, payload) {
    return state.articles[payload]
  },
}
export const actions = {
  getSpeceficArticle({ commit }, payload) {
    commit('getSpeceficArticle', payload)
  },
}

and here my component codes:

<template>
  <div class="article">
    {{ getSpeceficArticle() }}
    <div class="article__banner">
      <img src="" alt="" />
    </div>
    <div class="article__text">
      <p></p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeArticlesArticle',
  data() {
    return {
      item: '',
    }
  },
  // computed: {},
  methods: {
    async getSpeceficArticle() {
      return await this.$store.dispatch('articles/getSpeceficArticle', 0)
    },
  },
}
</script>

Upvotes: 2

Views: 830

Answers (3)

RuNpiXelruN
RuNpiXelruN

Reputation: 1920

@Mohammad if you find yourself using a lot of getters/actions etc from Vuex and they're starting to get a little wordy, you can bring in mapGetters from Vuex and rename your calls to something a little more convenient. So your script would become,

<script>
import { mapGetters } from 'vuex'  
export default {
  name: 'HomeArticlesArticle',
  data() {
    return {
      item: '',
    }
  },
   computed: {
     articleByIndex(){
       return this.getArticleByIndex(0)
     }
   },
    methods: {
      ...mapGetters({
        getArticleByIndex: 'articles/getArticleByIndex',
      })
    },
}
</script>

You can add ...mapGetters, ...mapActions to your computed section also.

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

actions are used to update the state they are like mutations but the main difference between them is that actions can include some asynchronous tasks, if you want to get a specific article at given index you should use a getter named getArticleByIndex :

export const getters = {
  getArticles(state) {
    return state.articles
  },
getArticleByIndex:: (state) => (index) => {
    return state.articles[index]
  }
}

then define a computed property called articleByIndex :

<script>
export default {
  name: 'HomeArticlesArticle',
  data() {
    return {
      item: '',
    }
  },
   computed: {
     articleByIndex(){
           return this.$store.getters.articles.getArticleByIndex(0)
        }

   },
  methods: {
   
  },
}
</script>

Upvotes: 3

Arsa
Arsa

Reputation: 76

since there is no web service call in vuex action, try to remove async and await keywords from the component. Later when you add a webservice call than you can wrap action body in new Promise with resolve and reject and then you can use async and await in component. let me know if this works for you.

Upvotes: 0

Related Questions