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

【问题标题】：Accessing $vuetify instance property from vuex store从 vuex 存储访问 $vuetify 实例属性
【发布时间】：2018-12-08 22:55:56
【问题描述】：

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

这是我的代码

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

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

这个对我有用

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

【讨论】：

我可以确认，这救了我！谢谢老兄！
也救了我！！
也可以作为window.$nuxt.$vuetify.theme.dark
或者用globalThis替换window

【解决方案2】：

对于 Vuetify 2.0，您可以尝试以下方法。 （在关注 Vuetify 2.0 Upgrade guide 主题后）

import Vuetify from './plugins/vuetify'

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

$vuetify 是一个 instance property 因此你可以访问任何 vue 实例属性使用

Vue.prototype.$prop

根据你的情况

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

【讨论】：

在 getter 和 state 中无法使用 Vue.prototype.$vuetify.lang.t()