【问题标题】: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()
        猜你喜欢
        • 2020-04-28
        • 2021-06-06
        • 2018-09-29
        • 1970-01-01
        • 2018-07-06
        • 2021-07-22
        • 1970-01-01
        • 2018-11-10
        • 1970-01-01
        相关资源
        最近更新 更多