1

If I had, for example sake, a Vuex setup as follows:

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

  }
})

I can emit an event which mutates the dialog variable, however, it appears that nothing is happening because my template is as follows:

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

So, my question is, how do I bind the store value for dialog rather than a locally defined variable?

I've tried the following, but to no luck:

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

...and...

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

What exactly am I missing from this?

Improve this question

1 Answer 1

Reset to default
1

You should use computed property:

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

and

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

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments