앱 확장을 시작하면서 큰 문제를 발견했습니다 !! .NET없이 다국어 양방향 앱을 개발 중 i18n입니다. 기본적으로 다음과 같은 언어 json 파일이 있습니다.
{
"fa":{
"dir": "rtl",
// ....
},
"en":{
"dir": "ltr",
//....
}
}
nuxtInitServer의 vuex 상태 lang에 저장합니다 . 하지만 두 가지 문제가 있습니다.
첫째, 글꼴 패밀리를 변경하기 위해 scss 파일에서 액세스하는 방법은 무엇입니까?
둘째, 내 플러그인에서 액세스하는 방법은 무엇입니까? 플러그인 에 관해서 는 여기에 내 설명이 있습니다.
btw, nuxt에서 전역 변수를 정의하여 어디서나 액세스 할 수 있으며 물론 변경 가능합니다 (env와 같은 정적이 아님). 예를 들어 언어를 변경할 때 .js 및 .scss 파일의 현재 언어에 액세스 할 수 있습니다.
여기 업데이트 는 저장에 액세스해야하는 실제 플러그인 코드입니다.
import Vue from 'vue'
import { required, email , alpha , alpha_spaces , numeric , confirmed } from 'vee-validate/dist/rules'
import { extend, ValidationObserver, ValidationProvider, setInteractionMode } from 'vee-validate'
import { store } from 'vuex'
Vue.prototype.$something= function (){
let lang = store.state.lang
}
setInteractionMode('eager')
extend('required', {
...required,
message: `{_field_} ${$lang.error_required}` // this is were i'm gonna use my vuex state
})
extend('email', email)
extend('alpha', alpha)
extend('numeric', numeric)
extend('alpha_spaces', alpha_spaces)
extend('confirmed', confirmed)
extend("decimal", {
validate: (value, { decimals = '*', separator = '.' } = {}) => {
if (value === null || value === undefined || value === '') {
return {
valid: false
};
}
if (Number(decimals) === 0) {
return {
valid: /^-?\d*$/.test(value),
};
}
const regexPart = decimals === '*' ? '+' : `{1,${decimals}}`;
const regex = new RegExp(`^[-+]?\\d*(\\${separator}\\d${regexPart})?([eE]{1}[-]?\\d+)?$`);
return {
valid: regex.test(value),
};
},
message: '{_field_} ' + ''
})
Vue.component('ValidationProvider', ValidationProvider);
Vue.component("ValidationObserver", ValidationObserver);
<template>
<div :class="containerLangClass">
<nuxt />
</div>
</template>
<script>
export default {
computed: {
containerLangClass() {
return "container-" + this.$store.getters.lang;
}
}
};
</script>
<style lang="scss">
.container-fa {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.container-en {
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
</style>
그래서 당신은 단지 상점을 가져올 수 없습니다
import {store} from './store';
다음과 같은 값을 사용하십시오.
store.getters.lang
이 시점에서 저장소가 초기화되지 않았기 때문입니다.
업데이트 물론 다음과 같은 사용자 지정 함수에서 저장소 게터, 작업 등을 사용할 수 있습니다.
import Vue from "vue";
Vue.prototype.$something = function (){
let lang = this.$store.getters.lang; //...etc
}
업데이트 2 사용자 지정 유효성 검사 메시지에서 상점을 사용하려면 마운트 된 후크에 유효성 검사를 추가하는 믹스 인을 추가 할 수 있습니다. 이 시점에서 vuex 스토어에 대한 모든 액세스 권한이 있습니다.
플러그인 코드 :
import Vue from "vue";
import { extend } from "vee-validate";
import { required } from "vee-validate/dist/rules";
Vue.mixin({
mounted() {
extend("required", {
...required,
message: fieldName => {
return `${fieldName} ${this.$store.getters.$lang.error_required}`;
}
});
}
});
이 코드는 mount가 호출 될 때마다 호출됩니다. 따라서 필요한 페이지에서이 유효성 검사를 사용하는 것이 좋습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다