如何为vuex实现带参数的 getter和state.commit


Posted in Javascript onJanuary 04, 2019

getter 带参数

参考: https://vuex.vuejs.org/guide/getters.html#method-style-access

或者: https://stackoverflow.com/questions/37763828/javascript-es6-double-arrow-functions

官方例子:

getters: {
 // ...
 getTodoById: (state) => (id) => {
  return state.todos.find(todo => todo.id === id)
 }
}

使用:

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

stackoverflow 例子:

new Vuex.Store({
 getters: {
  someMethod(state){
   var self = this;
    return function (args) {
     // return data from store with query on args and self as this
    };    
  }
 }
})

commit 带参数

参考; https://stackoverflow.com/questions/46097687/vuex-passing-multiple-parameters-to-action 和 https://stackoverflow.com/questions/40522634/can-i-pass-parameters-in-computed-properties-in-vue-js

就是把第二个参数,以hash的形式传过来。

// vue页面调用:
   store.commit(INCREASE, {
    vid: vid  // 这里可以容纳更多参数
   })

// store.js 
const mutations = {
 [INCREASE](state, data){
  pair = state.pairs.find( (pair) => {
   return pair.vid == data.vid  // 注意这里的 data.vid 就是了。
  })
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
js轮播图代码分享
Jul 14 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
原生javascript实现连连看游戏
Jan 03 #Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 #Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 #Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 #Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 #Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 #Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 #Javascript
You might like
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
[02:05]2014DOTA2西雅图邀请赛 专访啸天mik夫妻档
2014/07/08 DOTA
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
介绍一下内联、左联、右联
2013/12/31 面试题
路政管理专业推荐信
2013/11/11 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
这样写python注释让代码更加的优雅
2021/06/02 Python
实战Python爬虫爬取酷我音乐
2022/04/11 Python