Vue.js+Vuetify+TypeScript环境下如何在Vuetify配置文件中使用Vuex状态变量？

你好呀！直接在vuetify.ts里引用Vuex的darkMode变量是可行的，但需要调整代码结构和顺序——因为Vuetify实例初始化时，Vuex Store还没自动挂载到Vue实例上，直接写dark: darkMode会找不到变量。下面一步步教你实现：

1. 确认Vuex Store的导出 #

首先确保你的src/store/index.ts已经正确导出Store实例，示例如下：

// src/store/index.ts
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    darkMode: false // 你的初始深色模式状态
  },
  mutations: {
    // 用于切换深色模式的mutation
    toggleDarkMode(state) {
      state.darkMode = !state.darkMode;
    }
  },
  getters: {
    // 可选：用getter封装状态，更符合Vuex最佳实践
    getDarkMode: state => state.darkMode
  }
});

2. 修改Vuetify配置文件 #

在src/plugins/vuetify.ts中导入Store，用Store的初始值设置主题默认状态，同时监听Store的变化来动态更新Vuetify主题：

// src/plugins/vuetify.ts
import Vue from "vue";
import Vuetify from "vuetify/lib/framework";
import store from '../store/index'; // 导入你的Vuex Store

Vue.use(Vuetify);

// 创建Vuetify实例，用Store的初始darkMode值作为默认深色模式
const vuetify = new Vuetify({
  theme: {
    dark: store.state.darkMode, // 这里用Store的初始状态
    themes: {
      light: {
        primary: "#32A4A0",
        secondary: "#C83C96",
        background: "#FFFFFF",
        border: "#BEBEBE", // 注意补上颜色值的#号，之前的代码漏了
        warning: "#FFE011",
        error: "#F40808",
      },
      dark: {
        primary: "#4EC0EB",
        secondary: "#FF79C0",
        background: "#353535",
        border: "#BEBEBE",
        warning: "#FFE011",
        error: "#F40808",
      },
    },
  },
});

// 监听Vuex中darkMode的变化，动态更新Vuetify主题
store.watch(
  state => state.darkMode, // 监听的状态
  (newValue) => {
    vuetify.framework.theme.dark = newValue; // 更新Vuetify的深色模式状态
  }
);

export default vuetify;

3. 确保main.ts的导入顺序 #

在src/main.ts中，要先导入Store再导入Vuetify，保证Store在Vuetify初始化前就已经创建：

// src/main.ts
import Vue from 'vue';
import App from './App.vue';
import store from './store'; // 先导入Store
import vuetify from './plugins/vuetify'; // 再导入Vuetify

new Vue({
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app');

关键说明 #

• 初始状态：Vuetify初始化时会用Store里的darkMode初始值设置主题，保证页面加载时的状态正确。
• 动态更新：通过store.watch监听darkMode的变化，一旦状态改变就同步更新Vuetify的主题，这样你在组件里通过Vuex修改darkMode时，页面主题会自动切换。
• 小细节：之前你的颜色值border: "BEBEBE"漏了#号，要改成#BEBEBE才能正确识别颜色。

这样就能完美实现Vuex状态和Vuetify主题的同步啦！

内容的提问来源于stack exchange，提问作者Robert Salca