Измените цветовую тему приложения в Vuex, используя Магазин - PullRequest
Новая
       6

Измените цветовую тему приложения в Vuex, используя Магазин

0 голосов
/ 24 ноября 2018

Как реализовать переход между двумя цветовыми темами, связанными с изменением языка?

Языки меняются с помощью Vuex Store.При смене языка необходимо изменить класс тела.

Состояние истории: 

export default {
  language: {
    current: { name: 'en'},
    available: [{ name: 'en' }, { name: 'ru' }]
  }
}

Действие истории: 

export default { ['app:language:change']({ commit }, language) { 
 commit('app:language:change', language); },
}

Мутация истории: 

export default { ['app:language:change'](state, language) { 
 state.language.current = language; },
}

Изменение языка компонента 

<tempalte v-for="(lang, index) in availableLanguages">
   <span style="cursor: pointer;"  v-on:click="() => 
     onLanguageChange(lang)">{{ lang.name }}</span>
   <span v-if="index !== availableLanguages.length - 1"> / </span>
</tempalte>

<script>
    export default {
      name: 'app-footer',
    computed: {
     language()
       {return this.$store.state.language.current;},
     availableLanguages() 
       {return this.$store.state.language.available;}
    },
    methods: {
      onLanguageChange(lang) {
        this.$store.dispatch('app:language:change', lang); }
    }
  }
</script>

Пример компонента, в котором изменяется язык 

<template>
    <h1> {{ language && title && title[language.name] }} </h1>
</template>
<script>
    const ABOUT_DIC = {
       title: {
         en: 'About',
         ru: 'Компания'
       }
     };
     export default {
        name: 'about',
        data () {
           return { title: ABOUT_DIC.title }
        },
        computed: {
            language() {
               return this.$store.state.language.current; }
     }
    }
</script>

1 Ответ

0 голосов
/ 24 ноября 2018

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

<template>
  <div v-bind:class="[language.name === 'en' ? englishClass : russianClass]">
    <h1> {{ language && title && title[language.name] }} </h1>
  </div>
</template>
<script>
    const ABOUT_DIC = {
       title: {
         en: 'About',
         ru: 'Компания'
       }
     };
     export default {
        name: 'about',
        data () {
           return { 
             title: ABOUT_DIC.title, 
             englishClass: 'blue',
             russianClass: 'green'
             }
        },
        computed: {
            language() {
               return this.$store.state.language.current; }
     }
    }
</script>
<style scoped>
  .blue {
    background-color: blue;
  }
  .green {
    background-color: green;
  }

И, очевидно, вы можете выбрать любой стиль в синем или зеленом классе.Документы vue.js по этому вопросу здесь

...