如何为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 相关文章推荐
jquery 表单下所有元素的隐藏
Jul 25 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
Javascript的闭包详解
Dec 26 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 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学习之 数组声明
2011/06/09 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
php之可变函数的实例详解
2017/09/13 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
js判断一个字符串是否包含一个子串的方法
2015/01/26 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
javascript数据类型详解
2017/02/07 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
Python的高级Git库 Gittle
2014/09/22 Python
跟老齐学Python之for循环语句
2014/10/02 Python
Python实现某论坛自动签到功能
2019/08/20 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
应届生.NET方向面试题
2015/05/23 面试题
大学生求职推荐信
2013/11/27 职场文书
村党支部换届选举方案
2014/05/02 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
党委工作总结2015
2015/04/27 职场文书
2015年房产销售工作总结范文
2015/05/22 职场文书
python通过函数名调用函数的几种方法总结
2021/06/07 Python