Vuex 使用 v-model 配合 state的方法

v-model 最好用的就是配合 data �_成 Two-way Binding,但若使用 Vuex 之後,是否�能使用 v-model 搭配 state �^�m Two-way Binding 呢 ?

Version

Vue 2.5.17

Vuex 3.0.1

V-model vs. Data

HelloWorld.vue



Vue 的 v-model ����法,直接�� �定到 name data。

Value vs. Input

但若�� name data 提升到 Vuex 的 name state 之後,就�]�@�N��瘟恕�

Vuex ���{的是 Unidirection Dataflow, state 只能被�x取,要��入 state 必�靠 mutation ,因此 v-model �o法直接��入 state 。

v-model 本�|是 value property binding �c input event 的 syntatic sugar,因此可以回�w基本�幼鳎�使用 value �c input ���F。

HelloWorld.vue


第 4 行

�� name �定到 value ,�� onInputName() �定到 input event。

16 行

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

�� name state 建立 name computed。

19 行

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

定�x onInputName() ,��接收 input event,呼叫 setName mutations 修改 name state。

store.js

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

Vue.use(Vuex);

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

很��实� Vuex ��法,由 setName mutation ��修改 name state。

�@�N��法�m然可行,但似乎�适Я嗽�本 v-model 的特色,又必�走回�^路使用 event

V-model vs. Computed with Setter

HelloWorld.vue


第 4 行


v-model 回�砹耍�但�定的是 name computed,而不是 name data。

14 行

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

建立 name computed,�榱俗� v-model 能�\作,特�e�� name computed 加上 setter。

  • get() :���� name state 抓�Y料
  • set() :��呼叫 setName mutation ��入 state

透�^有 setter 的 computed,我��就能�^�m使用 v-model 了。

Conclusion

�m然使用 value vs. input ��法也行,但 v-model vs. computed with setter ��法更��雅,���丈辖ㄗh用此

Sample Code

完整的�例可以在我的 GitHub 上找到

Reference

Vuex , Form Handling

总结

以上所述是小编给大家介绍的Vuex 使用 v-model 配合 state的方法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

你可能感兴趣的:(Vuex 使用 v-model 配合 state的方法)