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 相关文章推荐
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
Bootstrap组件(一)之菜单
May 11 Javascript
jquery事件与绑定事件
Mar 16 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
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
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
vue实现登陆登出的实现示例
2017/09/15 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
iview中Select 选择器多选校验方法
2018/03/15 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
在Django同1个页面中的多表单处理详解
2017/01/25 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
pandas apply多线程实现代码
2020/08/17 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
十佳护士获奖感言
2014/02/18 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
javascript函数式编程基础
2021/09/15 Javascript
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers