Question

我要在某些Vue组件中访问一组静态数据。示例：

COLORS = Object.freeze({
    RED: 1,
    GREEN: 2,
    BLUE: 3,
})
FLAVOURS = Object.freeze({
    VANILLA: 'vanilla',
    CHOCOLATE: 'chocolate',
})

我正在使用单个文件组件。
我想在组件模板和JS代码（即data()中）访问这些常量。
我不希望他们反应迟钝。
如果可能的话，我希望它们仅被实例化一次（不将每个常量复制到每个组件实例中）。
我目前不使用Vuex，但如果可以找到更优雅的解决方案，我会考虑使用。

我尝试使用mixin解决我的问题：

// ColorMixin.js
export const COLORS = Object.freeze({
    RED: 1,
    GREEN: 2,
})

export const ColorMixin = {
    created() {
        this.COLORS = COLORS
    }
}

然后，在我的组件中，我必须使用该mixin以及常量：

<template>
    <input name="red" :value="COLORS.RED" />
    <input name="green" :value="COLORS.GREEN" />
</template>
<script>
    import {COLORS, ColorMixin} from './ColorMixin.js'
    export default {
        mixins: [ColorMixin],
        data() {
            return {
                default_color: COLORS.RED,
            }
        }
    }
</script>

这可行，但似乎有点重复。我的问题是否有更优雅的解决方案？

Answer 1

您不只是将Color.js文件中导出的var导入正确的SFC中？

COLORS = Object.freeze({
  RED: 1,
  GREEN: 2,
  BLUE: 3,
});
FLAVOURS = Object.freeze({
  VANILLA: 'vanilla',
  CHOCOLATE: 'chocolate',
});

export {COLORS, FLAVOURS};

然后在您的证监会中

<template>
  <input name="red" :value="default_color" />
</template>

<script>
  import {COLORS, FLAVOURS} from './Color.js';

  export default {
    data() {
      return {
        default_color: COLORS.RED,
        default_flavour: FLAVOURS.CHOCOLATE,
      }
    }
  }
</script>

或者只是创建一个Vuex存储来保存这些数据并直接在每个SFC中使用它

Answer 2

仅使用global mixin怎么样？

// import your constants
Vue.mixin({
  created: function () {
    this.COLORS = COLORS;
  }
})

在Vue组件之间共享常量

2 个答案: