mapState with setter

Question

I would like to assign setter methods via mapState. I currently use a workaround where I name the variable that I am interested in (todo) as a temporary name (storetodo) and then refer to it in another computed variable todo.

methods: {     ...mapMutations([         'clearTodo',         'updateTodo'     ]) }, computed: {     ...mapState({         storetodo: state => state.todos.todo     }),     todo: {         get () { return this.storetodo},         set (value) { this.updateTodo(value) }     } } 

I would like to skip the extra step and define the getter, setter directly within mapState.

Why would I want to do this?

The normal approach would be use mapMutations/mapActions & mapState/mapGetters without the computed get/set combination that I have illustrated above and to reference the mutation directly in the HTML:

<input v-model='todo' v-on:keyup.stop='updateTodo($event.target.value)' /> 

The getter/setter version allows me to simply write:

<input v-model='todo' /> 

Answer 1

You can't use a getter/setter format in the mapState

what you can try is directly return the state in your get() and remove mapState from the computed property

computed: {     todo: {         get () { return this.$store.state.todos.todo},         set (value) { this.updateTodo(value) }     } }  

Here is a related but not same JsFiddle example