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

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!

CodePudding user response：

I think what you're trying to do is bind the dark mode to the store value. The settings you pass in initially are just initialisation values. So you need to do this:

<v-app :dark="darkMode">

and then have a computed property to get the darkMode from the store

computed: {
    darkMode() {
      return store.index.darkMode
    }
  }

darkMode should then be reactive and update the dark value in the v-app bound to it. not tested it but hopefully get you going in the right direction

CodePudding user response：

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

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