使用 Vuetify Switch 更改 Vuex 状态

Posted 2023-02-23

【中文标题】使用 Vuetify Switch 更改 Vuex 状态

【英文标题】：Change Vuex state with Vuetify Switch

【发布时间】：2020-11-04 05:29:30

【问题描述】：

我正在使用 Vuetify 制作一个多组件 Vue 应用程序，并实现了一个设置页面 (Settings.vue)，并有一个 v-switch 用于主题设置以将应用程序更改为暗模式。我可以使用v-model="this.$store.state.isDark" 获取开关的初始状态，但是当我使用单击它时，我将其设置为运行@change="changeDark()" 方法。

methods

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

我在控制台中收到此错误

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

Cannot read property '$store' of null

我读到这是因为他们的 switch 没有包含在 v-app 中，但我的是，这是我的 App.vue

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

还有我的 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>

我的 Vue 实例结构通过 Vue chrome 扩展

我假设这是因为它无法访问 Vue 实例，因为 this 不起作用，但为什么？

编辑： 使用v-btn 工作得很好，只是似乎开关不起作用。我也尝试了v-checkbox，它也不起作用

【问题讨论】：

这是由于您在方法的箭头函数中使用了this。

我试过了，还是不行。这样做changeDark: function() this.$store.dispatch("commitDarkMode") 仍然不起作用

现在很有趣，使用这样声明的函数仍然会出现同样的错误？

作为参考，我认为你的问题是：***.com/a/48472445/11047824

是的，它给出了同样的错误，我也检查了那个线程，似乎没有帮助

【参考方案1】：

使用 mapActions 工作得很好，但我认为问题不在于调度，而是设置原始值，因为当我更改它时它已修复。

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

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

【参考方案2】：

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