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: {
    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

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

And my Settings.vue

        <v-container fluid>
                <v-col cols="4">
                        <v-card-title> Worlds - {{this.$store.state.worldsList.length}} </v-card-title>
                        <v-card-subtitle> List of total saved worlds </v-card-subtitle>
                            <v-list-item v-for="(n, index) in this.$store.state.worldsList" :key="n + index">
                                <v-card flat fluid>
                                    <v-card-title> {{}} </v-card-title>
                                    <v-card-subtitle> {{n.desc}} </v-card-subtitle>
                <v-col cols="6">
                       <v-card-title>Theme Settings</v-card-title>
                       <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-col cols="2">
                        <b> More Coming Soon </b>

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?

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

3 thoughts on “Change Vuex state with Vuetify Switch”

  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.

    <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>


Leave a Comment