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


Posted in Javascript onNovember 13, 2018

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 之後,就?]????瘟恕?/p>

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

v-model 本?是 value property binding ? input event 的 syntatic sugar,因此可以回?w基本?幼鳎?褂 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 能?作,特?e? name computed 加上 setter。

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

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

Conclusion

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

Sample Code

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

Reference

Vuex , Form Handling

总结

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

Javascript 相关文章推荐
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
jquery实现倒计时功能
Dec 28 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
vue与原生app的对接交互的方法(混合开发)
Nov 28 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
vue代码分割的实现(codesplit)
Nov 13 #Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 #Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 #Javascript
checkbox在vue中的用法小结
Nov 13 #Javascript
React父子组件间的传值的方法
Nov 13 #Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 #Javascript
详解如何用typescript开发koa2的二三事
Nov 13 #Javascript
You might like
php session应用实例 登录验证
2009/03/16 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
php中使用redis队列操作实例代码
2013/02/07 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
JS如何生成动态列表
2020/09/22 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[57:36]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第三场 2月1日
2021/03/11 DOTA
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
Python装饰器的执行过程实例分析
2018/06/04 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
python使用minimax算法实现五子棋
2019/07/29 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
python drf各类组件的用法和作用
2021/01/12 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
HTML5之语义标签介绍
2016/07/07 HTML / CSS
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
《散步》教学反思
2014/03/02 职场文书
政工例会汇报材料
2014/08/26 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
运动会主持词大全
2015/07/02 职场文书
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏