Search code examples
typescriptvue.jsstatevuexstore

Is there any way of bringing variables from state into a random typescript file?


I am using vue.js with vuetify. I have a value stored in state (using Vuex) that is defined in scr/store/index.ts (a boolean called darkMode)which I use in one of my view components inside a .vue file. I want, however, to use the same variable in the typescript file in which I have my vuetify settings (src/plugins/vuetify.ts). Is that even possible? I am new to vue.js/vuetify/typescript.

Here is a snippet of my code:

// src/plugins/vuetify.ts

import Vue from "vue";
import Vuetify from "vuetify/lib/framework";

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    dark: darkMode, // <--- HERE IS WHERE I WANT TO USE MY VARIABLE FROM STATE
    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",
      },
    },
  },
});

My folder structure looks like this:

src
---store
------index.ts
---plugins
------vuetify.ts

Thanks in advance!


Solution

  • Silly me. It was just a matter of importing the store object:

    import store from "../store/index";