템플릿에서 직접 Vuex 변수 상태 변경

템플릿에서 직접 Vuex 변수 상태 변경

예를 들어 Vuex를 다음과 같이 설정했습니다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    dialog: false
  },
  mutations: {
    openTermsAndConditions (state) {
      state.dialog = true
    }
  },
  actions: {

  }
})

대화 상자 변수를 변형시키는 이벤트를 내보낼 수 있지만, 내 템플릿이 다음과 같아서 아무 일도 일어나지 않는 것 같습니다.

<v-dialog v-model="dialog" transition="dialog-bottom-transition">

따라서 로컬로 정의된 변수가 아닌 대화 상자의 저장소 값을 어떻게 바인딩할 수 있습니까?

다음을 시도해 보았지만, 실패했습니다.

<v-dialog v-model="$this.store.dialog" transition="dialog-bottom-transition">

...그리고...

<v-dialog v-model="$this.state.dialog" transition="dialog-bottom-transition">

내가 여기서 정확히 뭘 놓치고 있는 거지?

계산된 속성을 사용해야 합니다.

computed: {
  dialog: {
    get () {
      return this.$store.state.dialog
    },
    set () {
      this.$store.commit('openTermsAndConditions')
    }
  }
}

그리고.

<v-dialog v-model="dialog" transition="dialog-bottom-transition">

언급URL : https://stackoverflow.com/questions/52052736/changing-the-state-of-vuex-variable-directly-from-template