CODEWITHSUNDEEP
javascriptvue.js
Eugene Chua
Eugene Chua

Reputation: 25

Vue - How to use computed properties correctly in VueJS?

I have some computed properties with different values, may I ask anyway to organize my data?

computed: {
  totalCoin() {
    const state = this.$store.state.ApiState.totalCoin
    let val
    if (state === 0) {
      val = 0
    } else if (state === null) {
      val = undefined
    } else {
      val = state
    }
   return val
  },
  totalGem() {
    const state = this.$store.state.ApiState.totalGem
    let val
    if (state === 0) {
      val = 0
    } else if (state === null) {
      val = undefined
    } else {
      val = state
    }
   return val
  }
  repeatedly...
}

Note: Every results value will return from VueX to a component by computed properties

getToken() {
  return this.$store.state.userToken
}

Is there a better way of doing this to improve readability?

Upvotes: 2

Views: 78

Answers (1)

Hoàng Trần
Hoàng Trần

Reputation: 600

  • I think you could write getters separately in the Vuex file.
const getters = {
    getTotalCoin(state){
        return state.totalCoin == null? undefined : state.totalCoin;
    },
    getTotalGem(state){
        return state.totalGem== null? undefined : state.totalGem;
    }
}
  • Then, you can use mapGetter in your Vue component. It maps store getters to local computed properties:
import { mapGetters } from 'vuex';

export default {
  // ...
  computed: {
    // map `this.totalCoin` to `this.$store.getters.getTotalCoin`
    ...mapGetters({totalCoin: 'getTotalCoin', totalGem: 'getTotalGem'})
  }
}

Upvotes: 1

Related Questions