如何为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 迁移目录
Dec 18 Javascript
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
jquery 选择器部分整理
Oct 28 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
JavaScript实现广告弹窗效果
Aug 09 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
vue请求本地自己编写的json文件的方法
Apr 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
150行Node.js实现的dns代理工具
2019/08/02 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
详解javascript void(0)
2020/07/13 Javascript
js实现随机点名
2021/01/19 Javascript
[04:29]2016国际邀请赛中国区预选赛Ehome战队教练采访
2016/06/27 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
python实现二分查找算法
2017/09/21 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
python实现简单日期工具类
2019/04/24 Python
对python中UDP,socket的使用详解
2019/08/22 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
大专生自荐信
2013/10/04 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
办公室岗位职责范本
2015/04/11 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
python删除csv文件的行列
2021/04/06 Python
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏