@dlabs71/d-vue-localization v1.0.0

D-vue-localization

Библиотека для упрощения реализации механизма локализации во Vue.js приложении

Установка NPM

npm i @dlabs71/d-vue-localization

Использование

Данная библиотека может быть использована в любом приложении основанном на стеке Vue.js 2 и Vuex 3.

D-vue-localization предоставляет Vue плагин при подключении которого добавляется глобальный mixin и vuex store module.

main.js

import Vue from 'vue';
import store from '@/store';
import router from '@/router';
import App from '@/App';
import DL10nPlugin from '@dlabs71/d-vue-localization';

const lang2messages = {
    "en": {
        MAIN_FORM: {
            ACCEPT_BTN_LABEL: "Accept",
            CANCEL_BTN_LABEL: "Cancel",
            PLEASE_WAIT: "Please wait ......"
        }
    },
    "ru": {
        MAIN_FORM: {
            ACCEPT_BTN_LABEL: "Принять",
            CANCEL_BTN_LABEL: "Отмена",
            PLEASE_WAIT: "Пожалуйста подождите ......"
        }
    }
};

Vue.use(DL10nPlugin, {
    lang2messages: lang2messages,
    store: store
});

new Vue({
    components: {App},
    router,
    store,
    template: '<App/>'
}).$mount('#app');

App.vue

<template>
    <div id="d-app" class="app d-app">
        <div v-if="loading" class="prepare-overlay">
            <span>{{ L10N_FORM.PLEASE_WAIT }}</span>
        </div>
        <v-app v-else>
            <v-btn text @click="acceptHandler">
                {{ L10N_FORM.ACCEPT_BTN_LABEL }}
            </v-btn>
            <v-btn text @click="cancelHandler">
                {{ L10N_FORM.CANCEL_BTN_LABEL }}
            </v-btn>
        </v-app>
    </div>
</template>

<script>
export default {
    name: 'app',
    data() {
        return {}
    },
    methods: {
        acceptHandler() {
        },
        cancelHandler() {
        }
    },
    computed: {
        L10N_FORM() {
            return this.getDL10nNameByCode('MAIN_FORM');
        }
    },
    mounted() {
        if (!this.getDL10nLang()) {
            this.setDL10nLang("ru");
        }
    }
}
</script>

Документация

Оглавление

• 1. Vue плагин DL10nPlugin
• 2. Vue миксин DL10nMixin
  • 2.1. Свойства data
  • 2.2. Методы
  • 2.3. Вычисляемые свойства (computed)
  • 2.4. Блок watch
  • 2.5. Хук created()
• 3. Модуль Vuex DL10nStoreModule
• 4. Класс DL10n
  • 4.1. Статичный геттер instance
  • 4.2. Метод addLang
  • 4.3. Метод addMessagesToLang
  • 4.4. Метод setLang2Messages
  • 4.5. Метод loadLang
  • 4.6. Метод getMessages

1. Vue плагин DL10nPlugin

Vue плагин DL10nPlugin предназначен для быстрого подключения библиотеки к Vue.js приложению. После подключения появляется доступ к методам/computed свойствам/data предоставляемыми vue mixin (DL10nMixin). А также, при указании экземпляра vuex хранилища, автоматически регистрируется vuex store module (DL10nStoreModule). Параметры плагина описаны в таблице ниже:

Пример использования:

import Vue from 'vue';
import store from '@/store';
import router from '@/router';
import App from '@/App';
import DL10nPlugin from '@dlabs71/d-vue-localization';

const lang2messages = {
    "en": {
        MAIN_FORM: {
            ACCEPT_BTN_LABEL: "Accept",
            CANCEL_BTN_LABEL: "Cancel",
            PLEASE_WAIT: "Please wait ......"
        }
    },
    "ru": {
        MAIN_FORM: {
            ACCEPT_BTN_LABEL: "Принять",
            CANCEL_BTN_LABEL: "Отмена",
            PLEASE_WAIT: "Пожалуйста подождите ......"
        }
    }
};

Vue.use(DL10nPlugin, {
    lang2messages: lang2messages,
    store: store
});

2. Vue миксин DL10nMixin

Vue миксин DL10nMixin регистрируется глобально и содержит вспомогательные методы/свойства для организации механизма локализации в приложении.

2.1. Свойства data

В блоке data миксин добавляет только одно свойство: $dL10n. В данном свойстве находиться экземпляр класса DL10n.

2.2. Методы

Миксин предоставляет ряд методов для реализации локализации в приложении. В таблице ниже описаны эти методы.

Пример использования:

<script>
export default {
    name: 'app',
    data() {
        return {}
    },
    computed: {
        L10N_FORM() {
            return this.getDL10nNameByCode('MAIN_FORM');
        }
    },
    mounted() {
        if (!this.getDL10nLang()) {
            this.setDL10nLang("ru");
        }
    }
}
</script>

2.3. Вычисляемые свойства (computed)

Миксин предоставляет одно вычисляемое свойство: $currentLang - оно имеет значение актуального кода языка, установленного в сторе.

2.4. Блок watch

В блоке watch миксин добавляет слушателя на вычисляемое свойство $currentLang. При изменении языка в сторе происходит автоматическое изменение и перезагрузка атрибутов класса DL10n в свойстве $dL10n блока data.

2.5. Хук created()

Миксин также реализует хук жизненного цикла created(). В нём реализуется начальная инициализация свойства $dL10n в блоке data. А также первоначальная установка языка.

3. Модуль Vuex DL10nStoreModule

Библиотека предоставляет готовый модуль Vuex (DL10nStoreModule) для организации хранения кода языка в приложении. Данный модуль подключается автоматически в плагине при указании параметра store. Также его можно подключить и отдельно.

Пример подключения:

import Vue from 'vue';
import Vuex from 'vuex';
import {DL10nStoreModule, STORE_MODULE_NAME} from '@dlabs71/d-vue-localization';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        [STORE_MODULE_NAME]: DL10nStoreModule
    },
    strict: process.env.NODE_ENV !== 'production'
});

4. Класс DL10n

Класс DL10n предназначен для реализации локализации приложения. Он предоставляет хранилище маппинга кода языка на сообщения, а также ряд методов для работы и получения сообщения для определённого языка.

Библиотека также предоставляет готовый экземпляр класса DL10n.

import {DL10nInstance} from '@dlabs71/d-vue-localization';

4.1. Статичный геттер instance

Статичный геттер instance предназначен для реализации паттерна Singleton для данного класса.

4.2. Метод addLang

Метод addLang предназначен для добавления нового кода языка с объектом сообщений для него.

Пример использования:

import {DL10n} from '@dlabs71/d-vue-localization';

let dL10n = new DL10n();

let messagesEn = {
    NAME1: "name 1",
    NAME2: "name 2"
};

dL10n.addLang("en", messagesEn);

let messagesRu = {
    NAME1: "имя 1",
    NAME2: "имя 2"
};

dL10n.addLang("ru", messagesRu);

4.3. Метод addMessagesToLang

Метод addMessagesToLang предназначен для добавления дополнительных сообщений к уже сохранённому языку.

Пример использования:

import {DL10n} from '@dlabs71/d-vue-localization';

let dL10n = new DL10n({
    "en": {
        NAME1: "name 1",
        NAME2: "name 2"
    },
    "ru": {
        NAME1: "имя 1",
        NAME2: "имя 2"
    }
});

let newMessagesEn = {
    NAME3: "name 3",
    NAME4: "name 4"
};

dL10n.addMessagesToLang("en", messagesEn);

4.4. Метод setLang2Messages

Метод setLang2Messages предназначен для инициализации хранилища маппинга языка на его сообщения.

Пример использования:

import {DL10n} from '@dlabs71/d-vue-localization';

let dL10n = new DL10n();

dL10n.setLang2Messages({
    "en": {
        NAME1: "name 1",
        NAME2: "name 2"
    },
    "ru": {
        NAME1: "имя 1",
        NAME2: "имя 2"
    }
});

4.5. Метод loadLang

Метод loadLang предназначен для загрузки определённого языка из хранилища. При этом в классе создаются дополнительные поля на основе кодов сообщений. Такие поля класса имеют префикс $.

Пример использования:

import {DL10n} from '@dlabs71/d-vue-localization';

let dL10n = new DL10n({
    "en": {
        NAME1: "name 1",
        NAME2: "name 2"
    },
    "ru": {
        NAME1: "имя 1",
        NAME2: "имя 2"
    }
});

dL10n.loadLang("en");

/* В классе появятся следующие поля:
class DL10n {
    lang2messages = {.....};
    lang = "en";
    $NAME1 = "name 1";
    $NAME2 = "name 2";
}
*/

dL10n.loadLang("ru");

/* В классе появятся следующие поля:
class DL10n {
    lang2messages = {.....};
    lang = "ru";
    $NAME1 = "имя 1";
    $NAME2 = "имя 2";
}
*/

4.6. Метод getMessages

Метод getMessages предназначен для получения по коду языка списка всех сообщений, находящихся в хранилище.

Пример использования:

import {DL10n} from '@dlabs71/d-vue-localization';

let dL10n = new DL10n({
    "en": {
        NAME1: "name 1",
        NAME2: "name 2"
    },
    "ru": {
        NAME1: "имя 1",
        NAME2: "имя 2"
    }
});

let messagesRu = dL10n.loadLang("ru");

/* 
messagesRu = {
    NAME1: "имя 1",
    NAME2: "имя 2"
}
*/