Vue - 如何在 VueJS 中正确使用计算属性？

Question

我有一些具有不同值的计算属性，我可以要求组织我的数据吗？

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

注意：每个结果值都会通过计算属性从 VueX 返回到组件

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

有没有更好的方法来提高可读性？

Answer 1

• 我认为您可以在 Vuex 文件中单独编写 getter。

const getters = {
    getTotalCoin(state){
        return state.totalCoin == null? undefined : state.totalCoin;
    },
    getTotalGem(state){
        return state.totalGem== null? undefined : state.totalGem;
    }
}

• 然后，您可以在 Vue 组件中使用 mapGetter。 它将存储 getter 映射到本地计算属性：

import { mapGetters } from 'vuex';

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