모든 정적 문자열을 한 곳에 배치하는 방법
vue webapp을 만들고 있는데 동적 콘텐츠가 있는 페이지는 적고 정적 콘텐츠가 대부분인 페이지도 적습니다.나는 이 정적 끈들을 한 곳으로 옮기고 싶다.
vue-i18n 또는 vue-multilanguage를 사용할 수도 있습니다.이것들은 이와 같은 콘텐츠 파일을 지원하는 기능을 제공하지만, 저는 여러 언어를 지원하는 사용 사례가 전혀 없기 때문에 좀 과한 것 같습니다.
다른 옵션은 상태 관리에 이미 사용하고 있는 vuex의 모든 문자열에 대한 vuex 저장소를 갖는 것입니다.
이를 위한 좋은 접근법.
표준적인 방법에 대해서는 잘 모릅니다.또, 모든 Web 프레임워크에 적용할 수 있습니다.그것은 흥미롭고 유효한 문제라고 말했다.
내가 뭔가를 해야 한다면:
- 나는 이 끈을 어디에서나 사용할 수 있기를 바란다.
- 모든 컴포넌트에 이러한 스트링을 Import하지 않고 매번 사용할 필요가 있습니다.
- Import하는 것을 확인하기 위해 왔다 갔다 할 필요가 없도록 스토리지 공간을 알기 쉽게 하고 싶습니다.[내 생각에서 가장 힘든 부분]
1을 달성하려면 다음을 사용합니다.
Vuex
- A
services/some.js
내보내는 파일object
. Plugins
다음과 같은 이유로 플러그인을 선택합니다.
나는 단지 사용하는 것만으로 현을 얻을 수 있다.this
컴포넌트에서Vue.use(plugin)
동일한 플러그인이 두 번 사용되는 것을 방지하고 동시에 모든 포인트를 달성합니다(3번째 플러그인은 여전히 어려운 너트입니다).vue-instance에 방해가 될 수 있는 것은 단점뿐입니다.
플러그인은 다음과 같이 설계할 수 있습니다.
// stringsHelperPlugin.js
const STRING_CONST = {
[component_1_Name]: {
key1: val1,
key2: val2,
....
},
[component_2_Name]: {
key1: val1,
key2: val2,
....
},
...
}
StringConst.install = function (Vue, options) {
Vue.prototype.$getStringFor = (componentName, key) => {
return STRING_CONST['componentName'][key]
}
}
export default StringConst
에main.js
이것은 다음과 같이 사용할 수 있습니다.
import StringConst from 'path/to/plugin'
Vue.use(StringConst)
다음과 같은 컴포넌트 템플릿에서 사용할 수 있습니다.
<div>
{{ $getStringFor(<component_1_name>, 'key1') }}
</div>
이런 걸 쓸 수 있어요.this.$getStringFor(<componentName>, key)
어떤 방법으로요.거의 모든 것이vuejs
제공해야 합니다.
세 번째 포인트는 '유지보수'입니다.컴포넌트명을변경한경우에도변경해야합니다.object
플러그인에 의해 반환되었습니다.이 문제도 여러 가지 방법으로 처리할 수 있습니다.
만들 수 있습니다.npm module
문자열이 포함된 JSON 파일을 사용하여
프로젝트에서 vuex를 사용하지 않는 경우, 콘텐츠를 javascript 파일에 저장하십시오. javascript 파일에는 기본적으로 모든 정적 콘텐츠가 포함된 객체가 포함되어 있으며 Belmin menioned와 같이 필요한 곳에 Import합니다.Vue js와 python flask를 백엔드로 사용하고 있습니다. 로컬 변수 세트를 원합니다. 어떻게 할 수 있을까요?
URL, 설정, 오류 등에 대해서도 같은 방법을 사용할 수 있습니다.
vuex를 사용하는 경우 모든 항목을 중앙 집중화하고 각 구성 요소에서 사용할 수 있는 getter를 만듭니다.
언급URL : https://stackoverflow.com/questions/42572745/how-to-have-all-the-static-strings-in-one-place
'sourcecode' 카테고리의 다른 글
SimpleDateFormat에 대한 액세스 동기화 (0) | 2022.09.06 |
---|---|
JavaScript를 사용하는 URL의 마지막 세그먼트 (0) | 2022.09.06 |
파이썬에서 델은 언제 유용합니까? (0) | 2022.09.06 |
Java에서의 이니셜라이저와 컨스트럭터 사용 (0) | 2022.09.06 |
여러 옵션 필드 필터를 사용한 SQL 키워드 검색(메타베이스) (0) | 2022.09.06 |