Как заставить Vuetify обновлять свои цвета при программном изменении темы - PullRequest
Новая
       21

Как заставить Vuetify обновлять свои цвета при программном изменении темы

0 голосов
/ 29 мая 2020

Я не могу обновить тему программно. Он обновляется, но для отображения обновлений темы требуется refre sh. Я пробовал использовать location.reload (); обновить sh страницу об обновлении. Это не работает.

Я использую Vue для сборки своего приложения.

В настоящее время я импортирую свой магазин в плагин vuetify. 

import Vue from "vue";
import Vuetify from "vuetify/lib";
import store from "./../store";

Vue.use(Vuetify);

let theme = store.getters.THEME;

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: theme.primary,
        secondary: theme.secondary,
        accent: theme.accent,
        error: theme.error
      }
    }
  }
});

Я устанавливаю переменные темы, которые я получаю с сервера, используя ax ios. 

setTheme() {
  this.$http
    .get(`organisations/${this.organisation}`)
    .then(response => {
      this.$store.dispatch("SET_THEME", response.data.organisation.theme);
    })
    .catch(e => {
      this.errors.push(e);
    });
}

Все работает, и даже, как ни странно, обновления lo go, которые я храню в том же объекте состояния vuex. 

state: {
    auth: {},
    user: {},
    organisation: {},
    theme: {
      primary: "#00ACC1",
      secondary: "#84FFFF",
      accent: "#80CBC4",
      error: "#EF9A9A",
      logo: ""
    },
    settings: {},
    rules: [],
    rulesFinal: {},
    journey: "main",
    selectedTable: {},
    selectedOrder: {},
    selectedCategory: {}
},

Однако, хотя lo go в том же объекте обновляется динамически, установленные мной цвета не обновляются. Что-то мне не хватает или способ принудительно обновить vuetify?

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

1 Ответ

0 голосов
/ 27 июня 2020

В итоге я установил значения прямо в ответе. 

setTheme() {
      const payload = {
        organisation: this.organisation
      };
      setTheme(payload)
        .then(response => {
          const theme = this.$vuetify.theme.themes.light;
          const responseTheme = response.organisation.theme;
          theme.primary = responseTheme.primary_color;
          theme.secondary = responseTheme.secondary_color;
          theme.accent = responseTheme.accent_color;
          theme.error = responseTheme.error_color;
          this.$store.dispatch("SET_THEME", response.data.organisation.theme);
        })
        .catch(e => {
          this.errors.push(e);
        });
    },
...