我怎么能在vue模板中使用const？

Question

我试图在*.vue文件中定义一个const

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

并在模板中使用它们

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

但它似乎不起作用.那么,我如何在vue模板中使用const？

Answer 1

如果你将它们暴露在你的数据上，你就会使它们变得不必要的反应性，正如@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>

Answer 2

将它们暴露在您的数据上.

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

Answer 3

您可以将插件用于此目的,因为您希望将其包含在多个组件中:

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

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>

Answer 4

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

数据/actions.js

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

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

我的组件.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>

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

Answer 6

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

例子：

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

<script>
const fooConst = "bar";

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

或完全使用 Composition API：

<script setup>
const fooConst = "bar";
</script>

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