Vuetify Switch를 사용하여 Vuex 상태 변경

Vuetify Switch를 사용하여 Vuex 상태 변경

Vuetify로 멀티 컴포넌트 Vue 앱을 만들고 있으며 설정 페이지(설정)를 구현했습니다.(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

내가 읽은 바로는 스위치로 싸여 있지 않아서 그런다고 하던데v-app제 앱은 여기 있습니다.표시하다

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

그리고 내 설정.표시하다

<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 chrome 확장을 통한 Vue 인스턴스 구조

이는 Vue 인스턴스에 액세스할 수 없기 때문이라고 생각합니다.this안 되는데 왜?

편집: 사용방법v-btn정상적으로 동작하고 있습니다.스위치가 작동하지 않는 것 같습니다.저도 한번 해봤어요v-checkbox그것도 안 돼요.

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>

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

언급URL : https://stackoverflow.com/questions/62902620/change-vuex-state-with-vuetify-switch