How To Use v-model with vuex and vue composition api?

Admin 1
Viewed 1566
<template>
    <div>
        <h1>{{ counter }}</h1>
        <input type="text" v-model="counter" />
    </div>
</template>

<script>
    import { computed } from 'vue'
    import { useStore } from 'vuex'
    export default {
        setup() {
            const store = useStore()
            const counter = computed(() => store.state.counter)
            return { counter }
        },
    }
</script>

How to change value of counter in the store when input value changes

I am getting this error in the console:

[ operation failed: computed value is readonly ]

vue.js
2 Answers
user_53368800

Try this:

<input v-model="counter">

computed: {
  counter: {
    get () {
      return this.$store.state.a
    },
    set (value) {
      this.$store.commit('updateA', value)
    }
  }
}
user_91557600
Related