我有一个nuxt项目(vuejs),我想知道如何在我的项目中存储常量?(大约 50 个常量)。
感谢您的回复。kaboume
您可以创建一个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';
@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_001.js
export const MY_FIRST_CONSTANT = 'is awesome'
常量/constants_002.js
export const MY_SECOND_CONSTANT = 'is also awesome'
常量/索引.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";
export {
X,
Y
}
之后只需使用,不需要在每个文件中导入它们,我需要它们为此创建插件,如下所示
import * as Constants from '@/locale/constants';
export default ({ app }, inject) => {
inject('constants', Constants)
}
之后,我可以在所需的每个文件中使用它们,如下所示
this.$constants.X
这取决于上下文。大多数时候,我发现常量在 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';
...
并始终只导入您需要的那些。好处还在于,如果您愿意,可以按主题将常量拆分为多个文件。
我使用常量.js
const api = "api";
export default Object.freeze({
api,
});
我创建了一个带有 dir 结构的插件:
|-- 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 的组件this
以及 Vuex 和 Nuxt 的context
中使用 $const
:
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
}
}