Локализация.

sunafajro commented 7 years ago

Подумать над возжными путями добавления локализации интерфейса на три языка - русский, чувашский, эсперанто. Возможно при помощи роутинга?

mirontoli commented 7 years ago

Есть несколько пакетов для локализации в экосистеме VueJs:

vuejs-localization
vue-locale
vue-localize, работает с роутингом.

sunafajro commented 7 years ago

отлично, похоже на то как это сделано в yii, отделный файл с переведенными строками. осталось разобраться как метяь язык туда обратно, похоже послдений модуль надо будет поставить и тестировать.

mirontoli commented 7 years ago

последний модуль требует vuex. Может быть попробовать первый, дефолтный чувашский, а изменения сохранять в куки. this.$lang.setLang('eo')

sunafajro commented 7 years ago

да, можно начать с простого

sunafajro commented 7 years ago

сделал бранч i18n и закинул туда первоначальный вариант. Работает неплохо, но два ньюанса.

надо куда то сохранить переменную языка, чтобы он не менялся при перезагрузке страницы (к примеру в куки)
сейчас язык реактивно меняется в пределах App.vue, нижестоящие компоненты меняют язык только при переходе на другую страницы. подумать почему так.

mirontoli commented 7 years ago

Да я тоже обнаружил это. Поискал по интернету. Может быть это как раз из-за того что это дочерний компонент.

sunafajro commented 7 years ago

проблема остается. я пробовал ставить watch: '$lang' в компоненте Home.vue и по нему вызывать функцию обновления языка, но он никак не реагирует на изменение $lang. хотя сам $lang меняется. пробовал делать в App.vue при обновлении языка $router.push на текущий адрес, но опять же никакого результата, видимо роутер игнорит переход если адрес совпадает с текущим.

sunafajro commented 7 years ago

на то что рендерится внутри изменение языка никак не влияет. осталось попробовать передавать prop из роутера, но не уверен что поможет.

mirontoli commented 7 years ago

я создал issue в vuejs-localization:

Messages are not refreshed in components

sunafajro commented 7 years ago

не совсем так. я не очень понимаю структуру. у нас есть основной инстанс в main.js, у него есть дочерний компонент App. Есть еще Router у него дочерние компоненты Home, About, Search и т.д. И вот тут вопрос как одно с другим связано? получается что на App изменение языка действует сразу, а вот на дочерние к роутеру компоненты нет.

sunafajro commented 7 years ago

вероятно все таки стоит задействовать роутер для передачи языка. http://router.vuejs.org/ru/essentials/nested-routes.html здесь правда тоже есть вопросы как это сделать.

mirontoli commented 7 years ago

Чего-то я запутался. Все что внутри <router-view></router-view> не переводится. Если по роутеру переходить, то работает. Попробуй так: поменяй язык, "последние статьи" не переводятся. Потом перейди на "О сайте" и обратно на первую страницу, "последние статьи" перевелись.

sunafajro commented 7 years ago

да именно так и происходит. потому что хоть мы и меняем язык глобально, но то что внутри router-view - уже отрендерилось и на него изменения никак не влияют без перезагрузки.

sunafajro commented 7 years ago

а отловить изменение $lang изнутри router-view почему то не получается. вот такая штука внутри Home.vue не работает (может быть я watch неправильно оформляю)

watch: { '$lang': 'someAction' }, methods: { someAction () { console.log(this.$lang); } }

sunafajro commented 7 years ago

все проблемы от непонимания архитектуры и методов приложения.

mirontoli commented 7 years ago

Да, я попробовал это добавить в toggleLang(lang)

this.$router.go({path: this.$router.currentRoute.path})

Язык меняется, но только из-за перезагрузки страницы. Но это некрасиво.

mirontoli commented 7 years ago

Чтобы "заставить компонент" обновиться я нашел workaround - $forceUpdate Я попробовал в отдельной ветке - i18n-force : Home.vue

    watch: {
        ...
        '$lang.current_lang': 'updateLang'
    },
...
        updateLang(lang) {
            this.$forceUpdate()
        }

sunafajro commented 7 years ago

ок, работает. я в i18n бранче дописал, только короче '$lang.current_lang': function () { this.$forceUpdate() }

sunafajro commented 7 years ago

если решение нормальное , можем мерджить в master

sunafajro commented 7 years ago

товарищ который это подсказал пишет что такой подход костыльный, надо использовать computed properties вместо него https://vuejs.org/v2/guide/computed.html

mirontoli commented 7 years ago

Да, это костыльный подход. :) workaround...

sunafajro commented 7 years ago

@mirontoli попробовал computed свойства, но не заработало. сделал по другому. создал объект в который складываются все надписи интерфейса, и при изменении $lang.current_lang этот объект обновляется. хотя не особо гибко получается.

sunafajro commented 7 years ago

@mirontoli слил содержимое бранча в master, ветку оставим пока, вдруг вернемся еще к этому вопросу. твою ветку i18n-force удалил, дабы не плодить повторов.

sunafajro / samahsar

Локализация. #3