Change Vuex state with Vuetify Switch

Question

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

Answer 1

Using mapActions worked just fine, however I believe the problem wasn't with dispatching but rather setting the original value, as when I changed this it fixed.

This: <v-switch v-model="this.$store.state.isDark":label="Dark Mode" @change="changeDark()"></v-switch>

To <v-checkbox v-model="darkMode":label="Dark Mode" @change="changeDark()"></v-checkbox>

Answer 2

changeDark() {
 this.$store.dispatch("commitDarkMode")
 }