v模型最好用的就是配合数据達成双向绑定,但若使用Vuex之後,是否還能使用v模型搭配状态繼續双向绑定呢& # 63;
<强>版本
Vue 2.5.17
Vuex 3.0.1
<强> v模型和数据/强>
<强> HelloWorld.vue
& lt; template>
& lt; div>
& lt; div>
& lt;输入类型=拔谋尽眝模型=皀ame”比;
& lt;/div>
& lt; div>
{{名称}}
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>/* *数据*/常量数据=https://www.yisu.com/zixun/function () {
返回{
名称:”,
};
};
出口默认{
名称:“HelloWorld”,
数据,
};
& lt;/script>
Vue的v模型標準寫法,直接將& lt; input>綁定到名称数据。
<强>值与输入
但若將名称数据提升到Vuex的名字状态之後,就沒這麼簡單了。
Vuex強調的是单向数据流,国家只能被讀取,要寫入状态必須靠突变,因此v模型無法直接寫入状态。
v模型本質是价值属性绑定與输入事件的syntatic糖,因此可以回歸基本動作,使用值與输入實現。
<强> HelloWorld.vue
& lt; template>
& lt; div>
& lt; div>
& lt;输入类型=拔谋尽?value=" https://www.yisu.com/zixun/name " @input=皁nInputName”比;
& lt;/div>
& lt; div>
{{名称}}
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
从“vuex”进口{mapState};/* * */计算
常量计算=mapState(['名字']);/* *方法*/const>
& lt;输入类型=拔谋尽?value=" https://www.yisu.com/zixun/name " @input=皁nInputName”在
將名字綁定到价值,將>
常量计算=mapState(['名字']);
從名称国家建立名计算。
19行
const>
从“进口Vue Vue ';
从“进口Vuex Vuex ';
Vue.use (Vuex);/* * */const状态={
名称:”,
};/* *突变*/const setName=(状态,有效载荷)=比;state.name=有效载荷;
const突变={
setName,
};
出口默认新Vuex.Store ({
严格:没错,
状态,
突变,
});
很標準的Vuex寫法,由setName突变負責修改名字。
這種寫法雖然可行,但似乎喪失了原本v模型的特色,又必須走回頭路使用事件
<强> v模型与计算和Setter
<强> HelloWorld.vue
& lt; template>
& lt; div>
& lt; div>
& lt;输入类型=拔谋尽眝模型=皀ame”比;
& lt;/div>
& lt; div>
{{名称}}
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>/* * */计算
const name={
get () {
返回这个。store.state.name美元;
}，
集(值){
store.commit美元。(“setName”、价值);
}，
};
常量计算={
的名字,
};
出口默认{
名称:“HelloWorld”,
计算,
};
& lt;/script>
第4行
& lt; input type=" text " v模型=皀ame”在
v模型回來了,但綁定的是名称计算,而不是名称数据。
14行
const name={
get () {
返回这个。store.state.name美元;
}，
集(值){
store.commit美元。(“setName”、价值);
}，
}
建立名计算,為了讓v模型能運作,特別將名字加计算上setter。
<李> get():負責從名字国家抓資料李
<李>设置():負責呼叫setName突变寫入国家
李
透過有setter的计算,我們就能繼續使用v模型了。
<强>结论
雖然使用值与输入寫法也行,但v模型与计算和setter寫法更優雅,實務上建議用此
<强>
示例代码
完整的範例可以在我的GitHub上找到
参考
Vuex,表单处理
以上所述是小编给大家介绍的Vuex使用v模型配合状态的方法,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
