Vuex uses v-model to cooperate with state

The best thing to use v-model is to achieve Two-way Binding with data, but if you use Vuex, can you still use v-model to continue with state?

Version

Vuex 3.0.1

V-model vs. Data

<template>
 <div>
  <div>
   <input type="text" v-model="name">
  </div>
  <div>
   {{ name }}
  </div>
 </div>
</template>

<script>
/** data */  
const data = function() {
 return {
  name: '',
 };
};

export default {
 name: 'HelloWorld',
 data,
};
</script>

Vue's v-model standard writing method directly defines <input> to name data.

Value vs. Input

But it is not so simple if you upgrade name data to Vuex's name state.

Vuex emphasizes that Unidirection Dataflow, state can only be read, and to write state, you must rely on mutation, so v-model cannot write state directly.

v-model is a syntypic sugar of value property binding and input event, so you can revisit the basic action, using value and input to realize.

<template>
 <div>
  <div>
   <input type="text" :value="name" @input="onInputName">
  </div>
  <div>
   {{ name }}
  </div>
 </div>
</template>
<script>
import { mapState } from 'vuex';
/** computed */
const computed = mapState(['name']);
/** methods */
const onInputName = function(e) {
 this.$('setName', );
};
const methods = {
 onInputName,
};
export default {
 name: 'HelloWorld',
 computed,
 methods,
};
</script>

Line 4

<input type="text" :value="name" @input="onInputName">

Determine name to value , determine onInputName() to input event.

16 rows

const computed = mapState(['name']);

Create name computed from name state.

const onInputName = function(e) {
 this.$('setName', );
};

DefinitiononInputName() , responsible for receiving input event, call setName mutations to modify name state.

import Vue from 'vue';
import Vuex from 'vuex';

(Vuex);

/** state */
const state = {
 name: '',
};
/** mutations */
const setName = (state, payload) =>  = payload;
const mutations = {
 setName,
};
export default new ({
 strict: true,
 state,
 mutations,
});

A very standard Vuex writing method, setName mutation is responsible for modifying name state.

Although this writing method is feasible, it seems to have lost the original v-model feature and must go back to use event

V-model vs. Computed with Setter

<template>
 <div>
  <div>
   <input type="text" v-model="name">
  </div>
  <div>
   {{ name }}
  </div>
 </div>
</template>
<script>
/** computed */
const name = {
 get() {
  return this.$;
 },
 set(value) {
  this.$('setName', value);
 },
};
const computed = {
 name,
};
export default {
 name: 'HelloWorld',
 computed,
};
</script>

Line 4

<input type="text" v-model="name">
v-model is back, but it is determined that name computed, not name data.

const name = {
 get() {
  return this.$;
 },
 set(value) {
  this.$('setName', value);
 },
}

Create name computerized, so that v-model can operate, add name computerized to setter.

get(): Responsible for grabbing data from name state
set(): responsible for calling setName mutation Write state

With setter computers, we can continue to use v-model.

Conclusion

Although using value vs. input writing method is also OK, v-model vs. computed with setter writing method is more elegant. In fact, it is recommended to use this.

Sample Code

A complete example can be found in mineGitHub Found on

Reference

Vuex , Form Handling

Summarize

The above is the method of using v-model with state introduced by the editor to you. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!