CODEWITHSUNDEEP
vue.jsvuex
user10261970
user10261970

Reputation:

Changing the state of Vuex variable directly from template

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?

Upvotes: 1

Views: 606

Answers (1)

Igor
Igor

Reputation: 809

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">

Upvotes: 1

Related Questions