在模板中使用常量作为属性名称

Question

我正在使用 vuex ，并且已经为getter名称常量分离了文件。在* .vue文件模板中使用该常量的最佳实践是什么？

// getter-types.js

export const CURRENT_USER_NAME = 'CURRENT_USER_NAME'

// store.js

const store = new Vuex.Store({
  state: {
    userName: ''
  },
  getters: {
    [CURRENT_USER_NAME]: state => {
      return state.userName
    }
  },
  // ...
})

在这里，我使用带有 _self 关键字的解决方案。我可以使用其他方法，并在 getter-types.js 中更改值，而不会出现任何错误。

// index-page.vue

<template>
<div>Hello, it works: {{_self[constants.CURRENT_USER_NAME]}}</div>
<div>Hello, it doesn't when I edit constant value later: {{CURRENT_USER_NAME}}</div>
<div>Hello, {{ ??? }}</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { CURRENT_USER_NAME } from './getter-types'

export default {
  data () {
    return {
      constants: { // I can't use constant name directly, so create object
        CURRENT_USER_NAME
      }
    }
  },
  created () {
    console.log(this[CURRENT_USER_NAME]) // works fine
  },
  computed: {
    ...mapGetters([
      CURRENT_USER_NAME
    ])
  }
}
</script>