如何为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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
js调试系列 初识控制台
Jun 18 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
JavaScript面向对象编写购物车功能
Aug 19 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
原生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
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
js中new一个对象的过程
2017/02/20 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
python 两个数据库postgresql对比
2019/10/21 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
Order by的几种用法
2013/06/16 面试题
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
品恩科技软件测试面试题
2014/10/26 面试题
生产总经理岗位职责
2013/12/19 职场文书
出纳员岗位责任制
2014/02/11 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
党员创先争优承诺书
2014/03/26 职场文书
田径运动会通讯稿
2015/07/18 职场文书
法律服务所工作总结
2015/08/10 职场文书
MySQL创建管理子分区
2022/04/13 MySQL