如何为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使用手册之 事件处理
Mar 24 Javascript
Open and Print a Word Document
Jun 15 Javascript
javascript web页面刷新的方法收集
Jul 02 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
前端把html表格生成为excel表格的实例
Sep 19 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 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工厂模式的日常使用
2019/03/20 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
[32:56]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.11
2020/12/16 DOTA
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
pygame编写音乐播放器的实现代码示例
2019/11/19 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
python 解决函数返回return的问题
2020/12/05 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
教师辞职报告范文
2014/01/20 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
大学生赌博检讨书
2014/09/22 职场文书
假期安全教育广播稿
2014/10/04 职场文书
接收函格式
2015/01/30 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
实习指导老师意见
2015/06/04 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL