Изменение состояния переменной Vuex непосредственно из шаблона

Question

Если бы я, например, ради, установил 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">

Что именно я упускаю из этого?

Answer 1

Вы должны использовать вычисляемое свойство:

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

и

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