从vuex存储访问$ vuetify实例属性

Question

我正在使用vuetify，想vuex使用$ vuetify实例从商店更改主题，但出现此错误Cannot set property 'theme' of undefined"

这是我的代码

export default {
  getters: {},
  mutations: {
    toggleDarkTheme(state) {
      this.$vuetify.theme.primary = "#424242";
    }
  }
};

Answer 1

对于Vuetify 2.0，您可以尝试以下方法。（遵循 Vuetify 2.0主题升级指南后）

import Vuetify from './plugins/vuetify'

export default {
  getters: {},
  mutations: {
    toggleDarkTheme(state) {
      Vuetify.framework.theme.themes.light.primary = "#424242";
    }
  }

Answer 2

$ vuetify是一个实例属性，因此您可以使用以下命令访问任何vue实例属性

Vue.prototype.$prop

对于你的情况

import Vue from 'vue';
export default {
  getters: {},
  mutations: {
    toggleDarkTheme(state) {
      Vue.prototype.$vuetify.theme.primary = "#424242";
    }
  }
};

Answer 3

对于 Vuetify 设置为 a 的 Nuxt.js 项目buildModule，您可以$vuetify从$nuxtVue 实例中的属性访问：

import Vue from 'vue';
export actions = {
  yourAction() {
    Vue.prototype.$nuxt.$vuetify.theme.dark = true;
  }
}

Answer 4

这个对我有用

...
toggleDarkTheme(state) {
   window.$nuxt.$root.$vuetify.theme.dark = true
}