Javascript 如何在vue模板中使用常量？

我试图在

*.vue

文件中定义常量

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

导出常量创建_操作=1
导出常量更新\u操作=2

并在模板中使用它们

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

...
....

---

但这似乎不起作用。那么，如何在vue模板中使用const呢？

在数据中公开它们

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

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

// 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>

---

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

data/actions.js

export const CREATE_ACTION=1；
导出常量更新_ACTION=2；
导出常量actionsMixin={
数据（）{
返回{
创造行动，
更新行动
}      
}
}

MyComponent.vue

某物
从'./data/actions.js'导入{actionsMixin，CREATE_ACTION}；
导出默认值{
mixin:[actionsMixin]
数据（）{
返回{
动作：创建动作
}      
}
}

如果您在数据中公开它们，则会使它们成为不必要的被动行为，如@mix3d所述

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

某物
导出默认值{
创建（）{
this.CREATE\u ACTION=CREATE\u ACTION；
this.UPDATE\u ACTION=UPDATE\u ACTION；
}
})

某物
从'/CONST.js'导入{FOO_CONST}；
导出默认值{
数据（）{
返回{
FOO_-CONST:Object.freeze（FOO_-CONST）//这使vue不响应此数据属性
}      
}
}

我发现向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>

从“./Action.js”导入操作
导出默认值{
Mixin:[动作。Mixin]
}

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

在Vue 3中，您可以使用

例如：

你好{{foocont}}
const foocont=“bar”；
导出默认值{
设置（）{
返回{
食客，
}
},
}

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

你的常数

应该与

你的常数

处于相同的情况，因为我得到了一个错误，“你的常数没有定义”。（ESLint还抱怨说，

YourConsts

没有定义。）@GinoMempin，没有。这是因为该变量尚未定义。答案OP应该包括在内，在定义安装方法之前，先让YourConsts={}行。作者的目标是摆脱这些神奇的行，你给他提供它们仍然会为不应该更改的静态对象创建反应性开销。在我看来，这是最合适的答案。在数据中公开会使它们变得被动，而且您仍然必须在模板中使用字符串值，这是我们首先要避免的。这是我的投票。它可以通过编写一个mixin工厂来进一步细化，该工厂动态地生成

创建的
钩子：`function mixinFactory（constants）{return{created（）{Object.keys（constants）.forEach（（cName）=>this[cName]=constants[cName]）；}，}；}“我喜欢这种方法，只是它似乎不适合打字。有人能建议一种消除TS错误的方法吗？
// 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>