Change Vuex state with Vuetify Switch

I am making a multi-component Vue app with Vuetify and have implemented a Settings page (Settings.vue) and have a v-switch for theme settings to change the app to dark mode. I can get the initial state for the switch by using v-model="this.$store.state.isDark" but when I use click it I set it to run a method @change="changeDark()".

methods

methods: {
    changeDark: () => this.$store.dispatch("commitDarkMode")
}

I get this error in console

Error in v-on handler: "TypeError: Cannot read property '$store' of null"

Cannot read property '$store' of null

I’ve read that it’s because their switch wasn’t wrapped in a v-app but mine is, here’s my App.vue

<template>
  <v-app :dark="this.$store.state.isDark">
    <Header />
    <router-view />
  </v-app>
</template>

And my Settings.vue

<template>
    <v-main>
        <v-container fluid>
            <v-row>
                <v-col cols="4">
                    <v-card>
                        <v-card-title> Worlds - {{this.$store.state.worldsList.length}} </v-card-title>
                        <v-card-subtitle> List of total saved worlds </v-card-subtitle>
                        <v-divider></v-divider>
                        <v-list>
                            <v-list-item v-for="(n, index) in this.$store.state.worldsList" :key="n + index">
                                <v-card flat fluid>
                                    <v-card-title> {{n.name}} </v-card-title>
                                    <v-card-subtitle> {{n.desc}} </v-card-subtitle>
                                </v-card>
                            </v-list-item>
                        </v-list>
                    </v-card>
                </v-col>
                <v-col cols="6">
                   <v-card>
                       <v-card-title>Theme Settings</v-card-title>
                       <v-divider></v-divider>
                       <v-switch v-model="this.$store.state.isDark" :label="`Dark Mode`" @change="changeDark()"></v-switch>
                       <v-card-subtitle> <b> More Coming Soon </b> </v-card-subtitle>
                   </v-card>
                </v-col>
                <v-col cols="2">
                    <v-card>
                        <b> More Coming Soon </b>
                    </v-card>
                </v-col>
            </v-row>
            <v-row></v-row>
        </v-container>
    </v-main>
</template>

And my Vue instance structure via the Vue chrome extension

I’m assuming this is because it can;t access the Vue instance, as this isn’t working but why?

EDIT:
Using a v-btn works perfectly fine, just seems the switch isn’t working. I have also tried a v-checkbox and it doesn’t work either

175 thoughts on “Change Vuex state with Vuetify Switch”

  1. I loved as much as you’ll receive carried out right here.

    The sketch is tasteful, your authored material stylish.
    nonetheless, you command get bought an impatience
    over that you wish be delivering the following.
    unwell unquestionably come more formerly again as exactly
    the same nearly a lot often inside case you shield this increase. http://droga5.net/

    Reply
  2. Pingback: ivermect 6mg
  3. Pingback: expired deltasone
  4. Pingback: ivermectol
  5. Pingback: viagra 400 mg