Question

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

感谢您的回复。卡波姆

Answer 1

没有最好的方法，这取决于项目和开发人员的风格和项目的需求。

在我的一些项目中，我创建了本地文件夹并在其上存储了一些数据，例如 breadcrumb 和 i18n。

之后在 constants.js 文件夹中创建文件 local 并在其上插入常量。如下图

const X="X";
const Y="Y";

export {
  X,
  Y
}

在那之后只是简单使用，不需要在我需要的每个文件中导入它们像下面这样创建插件

import * as Constants from '@/locale/constants';

export default ({ app }, inject) => {
    inject('constants', Constants)
}

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

this.$constants.X

Answer 2

我可以创建一个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';

谢谢

Answer 3

对我来说，这取决于上下文。在大多数情况下，我发现常量在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';
...

始终导入所需的内容。好处还在于，您可以根据需要将常量分为多个文件。

Answer 4

我使用constant.js

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

Answer 5

我认为@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

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

constants / constants_001.js

export MY_FIRST_CONSTANT = 'is awesome'

constants / constants_002.js

export MY_SECOND_CONSTANT = 'is also awesome'

constants / index.js

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

然后，您可以按照应用中使用的约定导入常量。

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

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

Answer 6

As mentioned above 我用目录结构创建了一个插件：

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

以及 constants.ts 中的代码：

import { defineNuxtPlugin } from '@nuxtjs/composition-api'
import * as constants from './config-constants'
    
export default defineNuxtPlugin((_, inject) => {
  inject('const', constants)
})

文件 ~/plugins/config-constants/index.ts 相应地导出文件夹的文件。

除此之外，我还添加了 type definitions 以在 Vue 组件的 $const 以及 Vuex 和 Nuxt 的 this 中使用 context：

import * as constants from '~/plugins/config-constants'

declare module 'vue/types/vue' {
  interface Vue {
    $const: typeof constants
  }
}

declare module '@nuxt/types' {
  interface Context {
    $const: typeof constants
  }
}

declare module 'vuex' {
  interface ActionContext<S, R> {
    $const: typeof constants
  }
}

在Nuxt中存储常数的最佳方法是什么？

6 个答案: