如何在 vue 模板中使用 const？答案

【问题标题】：How could I use const in vue template?如何在 vue 模板中使用 const？
【发布时间】：2017-07-28 11:29:02
【问题描述】：

我尝试在*.vue 文件中定义const：

<script>
    export const CREATE_ACTION = 1,
    export const UPDATE_ACTION = 2
<script>

并在模板中使用它们：

<template>
    ...
    <select :disabled="mode === UPDATE_ACTION">
    ....
</template>

但它不起作用。如何在 Vue 模板中使用 const？

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

在您的数据上公开它们：

new Vue({
    data:{
        CREATE_ACTION: CREATE_ACTION,
        UPDATE_ACTION: UPDATE_ACTION
    }
})

【讨论】：

但我想在另一个组件中使用它，并且...更优雅？
@litbear 您可以使用 mixins 或插件将内容包含在多个组件中，但要在模板中引用它们，您必须在数据上公开它们。
这种方法的缺点是这些值默认获得所有 Vue 交互性（和相关的开销）。不是很好，但在小用途中应该没问题。
将它们暴露给数据会创建值的可观察副本。您实际上不再与常量进行比较。

【解决方案2】：

您可以为此目的使用plugin，因为您希望将其包含在多个组件中：

// constsPlugin.js
const YOUR_CONSTS = {
  CREATE_ACTION: 1,
  UPDATE_ACTION: 2
  ...
}

let YourConsts = {}; // As suggested by the comments.

YourConsts.install = function (Vue, options) {
  Vue.prototype.$getConst = (key) => {
    return YOUR_CONSTS[key]
  }
}

export default YourConsts

在 main.js 或者你定义new Vue()的地方，你必须像这样使用它：

import YourConsts from 'path/to/plugin'

Vue.use(YourConsts)

现在您可以在组件模板中使用它，如下所示：

<div>
   <select :disabled="mode === $getConst('UPDATE_ACTION')">
</div>

【讨论】：

我认为YOUR_CONSTS 需要与YourConsts 的大小写相同，因为我收到“YourConsts is not defined”错误。（ESLint 还抱怨 YourConsts 没有定义。）
@GinoMempin，不。这是因为该变量尚未定义。答案 OP 应该包括，让 YourConsts = {} 在定义安装方法之前先行。
作者的目标是把魔法线去掉，你把它们提供给他

【解决方案3】：

使用 Mixins 怎么样？我就是这样做的。不确定这是最好的还是推荐的方法，但代码看起来更干净。

数据/actions.js

export const CREATE_ACTION = 1;
export const UPDATE_ACTION = 2;

export const actionsMixin = {
  data() {
    return {
      CREATE_ACTION,
      UPDATE_ACTION
    }      
  }
}

MyComponent.vue

<template>
  <div v-if="action === CREATE_ACTION">Something</div>
</template>

<script>
import {actionsMixin, CREATE_ACTION} from './data/actions.js';

export default {
  mixins: [actionsMixin]
  data() {
    return {
      action: CREATE_ACTION
    }      
  }
}
</script>

【讨论】：

仍然会为不应更改的静态对象产生反应性开销。

【解决方案4】：

如果你将它们暴露在你的数据中，你会让它们变得不必要的反应，正如@mix3d 提到的......

更好的方法是将它们添加到Vue对象Reactivity in Depth：

<template>
      <div v-if="action === CREATE_ACTION">Something</div>
</template>

<script>
export default {
    created() {
        this.CREATE_ACTION = CREATE_ACTION;
        this.UPDATE_ACTION = UPDATE_ACTION;
    }
})
</script>

【讨论】：

这是我认为最合适的答案。暴露在数据中会使它们具有反应性，而且您仍然必须在模板中使用字符串值，这是我们一开始就试图避免的。
这是我的投票。可以通过编写一个动态生成 created 钩子的 mixin 工厂来进一步详细说明：` function mixinFactory(constants) { return { created() { Object.keys(constants).forEach((cName) => this[cName] = 常量[cName]); }, }; } `
我喜欢这种方法，除了它似乎不能很好地与 TypeScript 配合使用。任何人都可以在这里提出一种消除 TS 错误的方法吗？

【解决方案5】：

<template>
  <div v-if="FOO_CONST.bar">Something</div>
</template>

<script>
import {FOO_CONST} from './const.js';

export default {
  data() {
    return {
      FOO_CONST: Object.freeze(FOO_CONST) // this makes vue not reactive this data property
    }      
  }
}
</script>

【讨论】：

【解决方案6】：

我发现Mixins 是一种将常量非响应式地添加到 vue 对象的巧妙方法。

首先创建你的常量：

// Action.js
const Action = {
  CREATE: 1,
  UPDATE: 2
}

Action.Mixin = {
  created () {
    this.Action = Action
  }
}

export default Action

然后在组件中：

<template>
  <select :disabled="mode === Action.UPDATE">
</template>

<script>
import Action from './Action.js'

export default {
  mixins: [Action.Mixin]
}
</script>

这就像 Alessandro Benoit 和 L. Palaiokostas 的答案之间的交叉。

【讨论】：

【解决方案7】：

在 Vue 3 中，您可以使用 setup()。

例子：

<template>
  <div>
    hello {{ fooConst }}
  </div>
</template>

<script>
const fooConst = "bar";

export default {
  setup() {
    return {
      fooConst,
    }
  },
}
</script>

【讨论】：

【解决方案8】：

<template>
  <div>
    <p :style="{ color: $options.COLOR }">
      {{$options.HELLO}} {{$options.PERSON}}
    </p>
  </div>
</template>

<script>
const HELLO = 'Hello there.';
const COLOR = 'red';

export default {
  mounted() {
    console.log('Hello world');
  },
  COLOR,
  HELLO,
  PERSON: 'General Kenobi!',
}
</script>

【讨论】：