Vue - How to use computed properties correctly in VueJS?

Question

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?

Dharman · Accepted Answer · 2021-03-09 10:14:09Z

1

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

edited Mar 9, 2021 at 10:14

Dharman♦

33.9k27 gold badges103 silver badges157 bronze badges

answered Mar 9, 2021 at 10:08

Hoàng Trần

6109 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue - How to use computed properties correctly in VueJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related