Vue - 如何在 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?

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