thehighhomie
@thehighhomie

Vue: Теминг приложения как в Vuetify?

Привет ребят!)

Я пытаюсь сделать возможность переключение темы, как в Vuetify чтобы в каждом компоненте была возможность получить переменную $theme через this и установить класс компоненту, в зависимости от значения переменной темы.

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

Вот что я попробовал:
import Vue from 'vue'
import store from '../store'

const install = (Vue) => {
  Vue.prototype.$theme = store.state.theme
}

Vue.use(install)


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

через миксин и опции я не решаюсь реализовать, так как я не понимаю, почему в миксинах есть проверки типа:
function vuexInit () {
    const options = this.$options
    // store injection
    if (options.store) {
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
  }
}


вдруг я какую утечку создам..

и вообще как я понимаю, при изменении значения переменной темы все компоненты приложения будут перерендериваться, хорошая ли это идея?

Посоветуйе пожалуйста как мне реализовать данный функционал.
  • Вопрос задан
  • 501 просмотр
Пригласить эксперта
Ответы на вопрос 1
@fan92rus
Можно использовать vuex хранить там конфиг тем и получать из компонента нужный конкретно ему. Тогда и реактивность будет.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы