如何为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 匿名函数及其代码模式原理
Mar 19 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
Vue登录主页动态背景短视频制作
Sep 21 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 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中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
Python发送email的3种方法
2015/04/28 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
python爬取指定微信公众号文章
2018/12/20 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python pytest进阶之fixture详解
2019/06/27 Python
Python hmac模块使用实例解析
2019/12/24 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Python中格式化字符串的四种实现
2020/05/26 Python
python实现梯度下降算法的实例详解
2020/08/17 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
计算机应用应届生求职信
2014/07/12 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
2015年库房工作总结
2015/04/30 职场文书
生鲜超市—未来中国最具有潜力零售业态
2019/08/02 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS