如何为vuex实现带参数的 getter和state.commit
更新时间：2019年01月04日 08:30:55 作者：siwei
这篇文章主要介绍了如何为vuex实现带参数的getter和state.commit，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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 就是了。
})
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
element-plus 在vue3 中不生效的原因解决方法(element-plus引入)
这篇文章主要介绍了element-plus 在vue3 中不生效的原因解决方法(element-plus引入),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下2021-06-06
eact 和angular，vue 这三个框架最近都比较火，下面这篇文章主要给大家介绍了关于利用angular、react和vue实现相同的面试题组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2018-02-02
这篇文章主要介绍了vue背景图片路径问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue项目中如何将当前页面生成图片问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在本篇文章里小编给大家整理了一篇关于Vue中使用计算属性的知识点总结内容，对此有兴趣的朋友们可以跟着学习参考下。2021-12-12
解决ant Design中Select设置initialValue时的大坑
这篇文章主要介绍了解决ant Design中Select设置initialValue时的大坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
Vue keepAlive实现不同的路由共用一个组件component的缓存问题(推荐)
这篇文章主要介绍了Vue keepAlive实现不同的路由共用一个组件component的缓存问题,实现方式使用Vue keepAlive实现页面缓存，需要的朋友可以参考下2022-08-08
在Vue中,有两种类型的自定义指令：局部指令和全局指令,但是除了这些指令 Vue也允许我们自己定义自己的指令,下面我们就来学习一下Vue中自定义指令的用法吧2023-08-08
这篇文章主要介绍了vue 指令与过滤器，本文通过案例代码给大家详细讲解，给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-11-11
最新评论