如何为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 相关文章推荐
让innerText在firefox火狐和IE浏览器都能用的写法
May 14 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
vue-router之nuxt动态路由设置的两种方法小结
Sep 26 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
javascript面向对象程序设计实践常用知识点总结
Jul 29 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 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
第一节--面向对象编程
2006/11/16 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
js判断是否为ie的方法小结
2014/01/13 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
jQuery实现飞机大战小游戏
2020/07/05 jQuery
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
Sanic框架路由用法实例分析
2018/07/16 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
python中os包的用法
2020/06/01 Python
python实现二分查找算法
2020/09/18 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
公司司机岗位职责范本
2014/03/03 职场文书
文秘应届生求职信
2014/07/05 职场文书
环卫个人总结
2015/03/03 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
MySQL触发器的使用
2021/05/24 MySQL
python的变量和简单数字类型详解
2021/09/15 Python
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers