如何为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 相关文章推荐
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
第二篇Bootstrap起步
Jun 21 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 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
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
合并ThinkPHP配置文件以消除代码冗余的实现方法
2014/07/22 PHP
php统计数组元素个数的方法
2015/07/02 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
AngularJS基础知识
2014/12/21 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
Python数据结构之Array用法实例
2014/10/09 Python
Python切片操作实例分析
2018/03/16 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Pytorch之finetune使用详解
2020/01/18 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
工程管理造价应届生求职信
2013/11/13 职场文书
行政办公室岗位职责
2014/03/18 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
质量保证书格式
2015/02/27 职场文书
被告答辩状范文
2015/05/22 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
导游词之介休绵山
2019/12/31 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
实战Python爬虫爬取酷我音乐
2022/04/11 Python