Vuex 之如何使用 v-model 配合 state ?
栏目: JavaScript · 发布时间: 5年前
内容简介:Vue 2.5.17Vuex 3.0.1
v-model
最好用的就是配合 data
達成 Two-way Binding,但若使用 Vuex 之後,是否還能使用 v-model
搭配 state
繼續 Two-way Binding 呢 ?
Version
Vue 2.5.17
Vuex 3.0.1
V-model vs. Data
HelloWorld.vue
<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 的 v-model
標準寫法,直接將 <input>
綁定到 name
data。
Value vs. Input
但若將 name
data 提升到 Vuex 的 name
state 之後,就沒這麼簡單了。
Vuex 強調的是 Unidirection Dataflow, state
只能被讀取,要寫入 state
必須靠 mutation
,因此 v-model
無法直接寫入 state
。
v-model
本質是 value
property binding 與 input
event 的 syntatic sugar,因此可以回歸基本動作,使用 value
與 input
實現。
HelloWorld.vue
<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.$store.commit('setName', e.target.value); }; const methods = { onInputName, }; export default { name: 'HelloWorld', computed, methods, }; </script>
第 4 行
<input type="text" :value="name" @input="onInputName">
將 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); };
定義 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。
這種寫法雖然可行,但似乎喪失了原本 v-model
的特色,又必須走回頭路使用 event
V-model vs. Computed with Setter
HelloWorld.vue
<template> <div> <div> <input type="text" v-model="name"> </div> <div> {{ name }} </div> </div> </template> <script> /** computed */ const name = { get() { return this.$store.state.name; }, set(value) { this.$store.commit('setName', value); }, }; const computed = { name, }; export default { name: 'HelloWorld', computed, }; </script>
第 4 行
<input type="text" v-model="name">
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
能運作,特別將 name
computed 加上 setter。
-
get()
:負責從name
state 抓資料 -
set()
:負責呼叫setName
mutation 寫入 state
透過有 setter 的 computed,我們就能繼續使用 v-model
了。
Conclusion
-
雖然使用
value
vs.input
寫法也行,但v-model
vs. computed with setter 寫法更優雅,實務上建議用此
Sample Code
完整的範例可以在我的 GitHub 上找到
Reference
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- RecyclerView使用指南(一)—— 基本使用
- 如何使用Meteorjs使用URL参数
- 使用 defer 还是不使用 defer?
- 使用 Typescript 加强 Vuex 使用体验
- [译] 何时使用 Rust?何时使用 Go?
- UDP协议的正确使用场合(谨慎使用)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。