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 相关文章推荐
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
JS图片懒加载技术实现过程解析
Jul 27 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
2017/04/19 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
python创建和使用字典实例详解
2013/11/01 Python
Python获取央视节目单的实现代码
2015/07/25 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
Python3中关于cookie的创建与保存
2018/10/21 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
期末总结的个人自我评价
2013/11/02 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
大四学生思想汇报
2014/01/13 职场文书
服务承诺口号
2014/05/22 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
2015年采购工作总结
2015/04/10 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android