Chrome 콘솔에서 VueX 작업/변환 오류

Chrome 콘솔에서 VueX 작업/변환 오류

외부 컴포넌트에서 사용하기 위해 드로어 데이터를 VueX에 저장하려고 합니다.

콘솔 오류:[vuex] unknown action type: app/switchDrawer

My VueJS 템플릿:

페이지/테스트.표시하다

<template>
  <v-navigation-drawer v-model="drawer" app>
    <v-list dense>
      ...
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  computed: {
    drawer: {
      get () {
        return this.$store.state.app.drawer
      },
      set (value) {
        console.log(value);
        return this.$store.dispatch('app/toggleDrawer', value)
      }
    }
  }
}
</script>

console.log() 함수는 콘솔에서 루프에 있는 많은 행을 제공합니다.

VueX의 mapGetters 클래스도 계산 get/set 대신 사용하고 싶습니다.

computed: mapGetters({
  drawer: 'app/drawer'
})

콘솔에 오류가 있습니다.

[Vue warn] :계산된 속성 "드로어"가 할당되었지만 설정기가 없습니다.

내 VueX 스토어:

스토어/앱.다운로드

export const state = () => ({
  drawer: true
})

export const getters = {
  drawer: state => state.drawer
}

export const mutations = {
  TOGGLE_DRAWER: (state) => {
    state.drawer = !state.drawer
  }
}

export const actions = {
  toggleDrawer ({ commit }, value) {
    commit('TOGGLE_DRAWER', value)
  }
}

새로운 돌연변이를 만들어 로컬에서 처리하고 싶지 않은 경우(이미 제 가게가 꽤 크기 때문에 개인적으로 선호했습니다)

vue-ui 라이브러리(vuesax)를 사용할 때 사용하는 것과 유사한 문제에 직면했습니다.

새로운 것을 초기화함으로써 해결.data에 가변적인.computed생성된 후크 내의 변수(스토어의 변수)(후크 내의 이유)

   created() {
      this.localDrawer = this.drawer
   },
   data() {
      return {
         localDrawer: ''
      }
   },
   computed: {
      ...mapGetters({
         drawer: 'drawer'
      })
   },
   watch: {
      drawer(newValue, oldValue) {
         this.localDrawer = newValue
      }
   }

지금 사용localDrawer유앱에 있어요.메모: 드로어 변수도 감시하고 있습니다.따라서 어떤 경우에도 값이 변경되면 반영됩니다.

문제를 찾았습니다. 계산 세터에는 반환문이 없어야 합니다.

 drawer: {
      get () {
        return this.$store.state.app.drawer
      },
      set (value) {
        this.$store.dispatch('app/toggleDrawer', value)
      }
    }

액션은 값을 받지 않는 변환에 값을 제출합니다.따라서 해당 값을 처리하는 새로운 변환을 추가하는 것이 좋습니다.

export const mutations = {
  SET_DRAWER: (state, value) => {
    state.drawer = value
  }
}

export const actions = {
  toggleDrawer ({ commit }, value) {
    commit('SET_DRAWER', value)
  }
}

언급URL : https://stackoverflow.com/questions/63794689/vuex-actions-mutations-error-in-chrome-console