如何为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实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
使用RN Animated做一个“添加购物车”动画的方法
Sep 12 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
原生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
ajax取消挂起请求的处理方法
2013/03/18 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
javascript之AJAX框架使用说明
2010/04/24 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
python监控文件或目录变化
2016/06/07 Python
python调用百度语音REST API
2018/08/30 Python
python实现flappy bird小游戏
2018/12/24 Python
wxPython实现列表增删改查功能
2019/11/19 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
研究生自我鉴定范文
2013/10/30 职场文书
暑假学习心得体会
2014/09/02 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
再谈python_tkinter弹出对话框创建
2022/03/20 Python
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技