Vue.js 在Nuxt中存储常量的最佳方法是什么？

我有一个nuxt项目（vuejs），我想知道如何在我的项目中存储常量？（大约50个常数）

谢谢你的回复。 kaboume

我使用constant.js

   const api = "api";
   export default Object.freeze({
    api,
   });

---

我可以创建一个constants.js文件

 // constants.js
 export const CONSTANT_1 = 'CONSTANT_1';
 export const CONSTANT_2 = 'CONSTANT_2';
 export const CONSTANT_3 = 'CONSTANT_3';

 // And call it like this
 import { CONSTANT_1 } from 'constants';

---

对我来说，这取决于上下文。大多数情况下，我发现常量在Vuex存储环境中对突变非常有用

您可以按如下方式定义常量列表：

// store/mutation-types.js
export const TOGGLE_MENU_STATE = 'TOGGLE_MENU_STATE';

然后在文件中使用它们

import {
  TOGGLE_MENU_STATE,
} from '../store/mutation-types';

const mutations = {
  [TOGGLE_MENU_STATE](state) {
    state.isOpen = !state.isOpen;
  },
};

export default mutations;

无论如何，Nuxt对文件夹结构非常谨慎，您可以进一步扩展它。考虑到非存储目的，我可能只需要创建一个

constants

文件夹，并用您需要的内容填充它

// constants/app-constants.js -- example
export const HYDRATING_SUCCESS = 'HYDRATING_SUCCESS';
export const HYDRATING_FAILED = 'HYDRATING_FAILED';
export const LOADING = 'LOADING';
export const LOADED = 'LOADED';
export const SET_ERROR_STATE = 'SET_ERROR_STATE';
export const CLEAR_ERROR_STATE = 'CLEAR_ERROR_STATE';
...

---

总是只导入你需要的。好处还在于，如果您愿意，您可以按主题将常量拆分为多个文件。

我认为@Birante几乎是正确的。仅仅因为某些文件夹没有附带样板文件，并不意味着你不能添加它们。但是我会提出这样一种结构

|-- assets
|
|-- components
|   |-- Logo.vue
|   `-- index.js
|
|-- constants
|   |-- constants_002.js
|   |-- constants_001.js
|   `-- index.js
|
|-- layouts
|   |-- default.vue
|   `-- index.js
|
|-- middleware
|   `-- index.js
|
|-- pages
|   `-- index.vue
|
|-- plugins
|
|-- static
|
|-- store
|   `-- index.js
|
|-- test
|   `-- Logo.spec
|
`-- package.json

然后以模块化的方式设置常量，就像您在应用程序的任何其他部分一样

import { MY_FIRST_CONSTANT, MY_SECOND_CONSTANT } from '@/constants/'

常量/常量_001.js

export const MY_FIRST_CONSTANT = 'is awesome'

常量/常量_002.js

export const MY_SECOND_CONSTANT = 'is also awesome'

常量/index.js

export * from './constants_001';
export * from './constants_002';

然后，您可以根据应用程序中使用的约定导入常量

import { MY_FIRST_CONSTANT, MY_SECOND_CONSTANT } from '@/constants/'

---

这对于

utils

也是一个很好的约定，您需要在整个应用程序中共享：）

根据项目和开发人员的风格以及项目的需要，没有最佳的方式

在我的一些项目中，我正在创建本地文件夹，并在其上存储一些数据，如

breadcrumb

和

i18n

然后在

local

文件夹中创建文件

constants.js

，并在其上插入常量。如下

const X=“X”；
const Y=“Y”；
出口{
X,，
Y
}

之后，我就可以简单地使用，不需要在我需要的每个文件中导入它们 创建插件，如下所示

import*作为“@/locale/Constants”中的常量；
导出默认值（{app}，inject）=>{
注入（'常量'，常量）
}

之后，我可以在下面需要的每个文件中使用它们

this.$constants.X

我创建了一个具有dir结构的插件：

|-- plugins
|   `-- config-constants
|   |   |-- config.ts
|   |   |-- index.ts
|   |   `-- messages.ts
|   `-- constants.js

以及

常量.ts

中的代码：

从'@nuxtjs/compositionapi'导入{defineNuxtPlugin}
将*作为常量从“/config constants”导入
导出默认的defineNuxtPlugin（（u，inject）=>{
注入（'const'，常量）
})

文件

~/plugins/config constants/index.ts

相应地导出文件夹的文件

除此之外，我还添加了

类型定义

以在Vue的组件

中使用
$const
，以及Vuex和Nuxt的
上下文
：

import*作为“~/plugins/config constants”中的常量
声明模块“vue/types/vue”{
接口Vue{
$const:typeof常量
}
}
声明模块'@numxt/types'{
接口上下文{
$const:typeof常量
}
}
声明模块“vuex”{
接口操作上下文{
$const:typeof常量
}
}
在哪个文件中？插件文件？不，在插件中，在根目录中创建一个文件夹，然后在该文件夹中创建一个文件，您知道这个答案之后是否发生了更改？我几乎已经把你的答案复制粘贴了下来。我得到一个
在“@/constants/linkConstants”中找不到导出“MY_FIRST_CONSTANT”
errorsHey@Quickee。很抱歉，我好像从导出中删除了
const
。答案已更新为
export const MY\u FIRST\u CONSTANT='is awesome'
。你能告诉我现在是否工作正常吗？是的，它解决了。但是，只有当我在JS中使用它们时。我试图在html中使用这些常量作为输出值或属性值，通过将它们设置为created或mounted
created（）：{this.var=const}
中的数据模型，我实现了这一点，这要感谢一个技术性的例子。是的，如果您想这样做，您可以在您创建的方法中绑定它们，或者让它们返回到您的数据对象中。如果需要，也可以将它们放入计算属性中。