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 相关文章推荐
javascript+xml技术实现分页浏览
Jul 27 Javascript
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
ES6关于Promise的用法详解
May 07 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
js实现简单选项卡制作
Aug 05 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
博士208HAF收音机实习报告
2021/03/02 无线电
一些常用的php函数
2006/12/06 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
php字符集转换
2017/01/23 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
老师推荐信
2013/10/28 职场文书
大学三年的自我评价
2013/12/25 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
买房子个人收入证明
2014/10/12 职场文书
个人政治思想总结
2015/03/05 职场文书
停课通知书
2015/04/24 职场文书
硕士论文致谢范文
2015/05/14 职场文书
小学音乐课教学反思
2016/02/18 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript