如何为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 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
JavaScript 乱码问题
Aug 06 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
May 31 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
Mar 13 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
vue中多个倒计时实现代码实例
Mar 27 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
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
Python实现性能自动化测试竟然如此简单
2019/07/30 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
类如何去实现接口
2013/12/19 面试题
大课间活动制度
2014/01/18 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
《金子》教学反思
2014/04/13 职场文书
质量主管工作职责
2014/09/26 职场文书
环卫处个人工作总结
2015/03/04 职场文书
2016公司年会通知范文
2015/04/25 职场文书
小学班主任教育随笔
2015/08/15 职场文书
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js