Каков наилучший способ хранения констант в Nuxt?

Question

У меня есть проект nuxt (vuejs), и мне интересно, как хранить константы в моем проекте? (около 50 констант).

Благодарю за ваш ответ. kaboume

Answer 1

Я могу создать файл 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 2

Я думаю, что @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'

константы /index.js

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

Затем вы можете импортировать свои константы в соответствии с соглашением, используемым в вашем приложении.

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

Это также отличное соглашение для utils также, что вам нужно поделиться в приложении:)

Answer 3

это не лучший способ, это зависит от проекта и стиля разработчика и потребностей проекта.

в некоторых моих проектах я создаю локальную папку и сохраняю некоторые данные, например 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 4

Для меня это зависит от контекста. В большинстве случаев я нахожу константы полезными в контексте хранилища 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 5

Я использую constant.js

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

Answer 6

Как упоминалось выше , я создал плагин со структурой 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использовать $constв компонентах thisVue, а также Vuex и Nuxt 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
  }
}