Javascript 使用Vuetify开关更改Vuex状态

我正在使用Vuetify制作一个多组件Vue应用程序，并实现了一个设置页面（Settings.Vue）和一个用于主题设置的

v开关

，以将应用程序更改为暗模式。我可以通过使用

v-model=“this.$store.state.isDark”

获取交换机的初始状态，但当我使用它时，单击它，我将其设置为运行方法

@change=“changeddark（）”

方法

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

我在控制台中得到这个错误

v-on处理程序中出现错误：“TypeError:无法读取null的属性“$store”

无法读取null的属性“$store”

我读到这是因为他们的交换机没有包装在

v-app中，但我的是，这是我的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>


Worlds-{{this.$store.state.worldsList.length}
保存的世界总数列表
{{n.name}
{{n.desc}}
主题设置
很快就会有更多
很快就会有更多

以及通过Vue chrome扩展的Vue实例结构

我认为这是因为它可以；无法访问Vue实例，因为此

不起作用，但原因是什么

编辑：

---

使用

v-btn

工作得非常好，只是开关似乎不工作。我还尝试了一个

v-checkbox

，它也不起作用使用mapActions效果很好，但是我相信问题不在于分派，而在于设置原始值，因为当我更改此选项时，它已修复

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

这：

到

---

这是因为您在方法中的箭头函数中使用了

This

。我在没有箭头函数的情况下尝试了它，但它仍然不起作用。做这个

changeduck:function（）{this.$store.dispatch（“commitDarkMode”）}

仍然不起作用，有趣的是，像这样使用声明的函数仍然会给您带来相同的错误？作为参考，这就是我认为您的问题所在：是的，它会产生相同的错误，我也检查了该线程，似乎没有帮助