如何为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 相关文章推荐
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
JavaScript实现select添加option
Jul 03 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
原生js实现放大镜特效
Mar 08 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 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/03/23 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
常用python编程模板汇总
2016/02/12 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
python儿童学游戏编程知识点总结
2019/06/03 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
python之array赋值技巧分享
2019/11/28 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
Python socket服务常用操作代码实例
2020/06/22 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
这段代码难道不该打印出56吗
2013/02/27 面试题
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
大学生作弊检讨书
2014/09/11 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
公司员工管理制度
2015/08/04 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
《比的意义》教学反思
2016/02/18 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书