在Nuxt中存储常数的最佳方法是什么?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Nuxt中存储常数的最佳方法是什么?相关的知识,希望对你有一定的参考价值。
我有一个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';
感谢
对我来说,这取决于上下文。大多数时候,我发现常量在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';
...
并且始终只导入您需要的那些。好处还在于,如果愿意,您可以按主题将常量分成几个文件。
我使用constant.js
const api = "api";
export default Object.freeze({
api,
});
我认为@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
的一个很好的约定,您需要在整个应用程序中共享:)
以上是关于在Nuxt中存储常数的最佳方法是什么?的主要内容,如果未能解决你的问题,请参考以下文章
使用 Nuxt.js 时动态 Vuex 模块初始化的最佳方法是啥?
将 bootstrap.css 包含到 nuxt 项目的最佳方法是啥?
使用 Nuxt 处理登录\注销按钮以避免闪烁内容的最佳方法是啥?