Измените состояние Vuex с помощью Vuetify Switch

Question

Я создаю многокомпонентное приложение Vue с помощью Vuetify и реализовал страницу настроек (Settings. vue) и имею v-switch для настроек темы, чтобы переключить приложение в темный режим. Я могу получить начальное состояние переключателя, используя v-model="this.$store.state.isDark", но когда я использую щелчок по нему, я устанавливаю его для запуска метода @change="changeDark()".

methods

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

I получить эту ошибку в консоли

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

Cannot read property '$store' of null

Я читал, что это потому, что их переключатель не был заключен в v-app, но мой , вот мое приложение. vue

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

И мои настройки. 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>

И моя структура экземпляра Vue через Vue chrome расширение

Я предполагаю, что это потому, что он не может получить доступ к экземпляру Vue, поскольку this не работает, но почему?

РЕДАКТИРОВАТЬ: Использование v-btn работает отлично, просто кажется, что переключатель не работает. Я также пробовал v-checkbox, и он тоже не работает

Answer 1

• 1000 * Кому <v-checkbox v-model="darkMode" :label="Dark Mode" @change="changeDark()"></v-checkbox>

Answer 2

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