如何為vuex實現(xiàn)帶參數(shù)的 getter和state.commit

更新時間：2019年01月04日 08:30:55 作者：siwei

這篇文章主要介紹了如何為vuex實現(xiàn)帶參數(shù)的getter和state.commit，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

getter 帶參數(shù)

參考： 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 帶參數(shù)

參考； 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

就是把第二個參數(shù)，以hash的形式傳過來。

// vue頁面調(diào)用：
   store.commit(INCREASE, {
    vid: vid  // 這里可以容納更多參數(shù)
   })

// store.js 
const mutations = {
 [INCREASE](state, data){
  pair = state.pairs.find( (pair) => {
   return pair.vid == data.vid  // 注意這里的 data.vid 就是了。
  })
 }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中定義的data為什么是函數(shù)
這篇文章主要介紹了vue中定義的data為什么是函數(shù),vue中已經(jīng)幫我們控制臺輸出警告，并且不會讓組件中的data合并到options中去，那么，很友好的處理了開發(fā)者的強行將data寫成對象的可能性，需要的朋友可以參考下
2022-09-09
Vuejs第九篇之組件作用域及props數(shù)據(jù)傳遞實例詳解
這篇文章主要介紹了Vuejs第九篇之組件作用域及props數(shù)據(jù)傳遞實例詳解的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09
vue路由history模式頁面刷新404解決方法Koa?Express
這篇文章主要為大家介紹了vue路由history模式頁面刷新404解決方法（Koa?Express）詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-11-11
vue一直自動換行的問題及解決
這篇文章主要介紹了vue一直自動換行的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法,本文給大家介紹的非常詳細,需要的朋友可以參考下
2024-05-05
使用vue寫一個翻頁的時間插件實例代碼
最近在做自己項目中遇到一個非常簡單的功能,跟大家分享下,這篇文章主要給大家介紹了關(guān)于使用vue寫一個翻頁的時間插件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-02-02
如何在Vue中使用debouce防抖函數(shù)
本文主要介紹在Vue中使用debouce防抖函數(shù)，設(shè)置一個門檻值，表示兩次?Ajax?通信的最小間隔時間。如果在間隔時間內(nèi)，發(fā)生新的keydown事件，則不觸發(fā)?Ajax?通信，并且重新開始計時。如果過了指定時間，沒有發(fā)生新的keydown事件再將數(shù)據(jù)發(fā)送出去，這便是debouce防抖函數(shù)
2021-12-12
基于vue-cli3多頁面開發(fā)apicloud應(yīng)用的教程詳解
這篇文章主要介紹了基于vue-cli3多頁面開發(fā)apicloud應(yīng)用，本文采用vue-cli+APIcloud的方式寫解決以上痛點，開發(fā)靈活，并且打包之后體積更小速度更快,需要的朋友可以參考下
2019-06-06
vue2?利用echarts?單獨繪制省份的步驟
這篇文章主要介紹了vue2?利用echarts?單獨繪制省份,首先引入所需要的第三方模塊，通過示例代碼給大家介紹的非常詳細，文章末尾給大家補充介紹了vue2.x結(jié)合echarts2實現(xiàn)顯示具體省份熱力圖的問題，需要的朋友可以參考下
2022-01-01
Vue實現(xiàn)下拉滾動加載數(shù)據(jù)的示例
這篇文章主要介紹了Vue實現(xiàn)下拉滾動加載數(shù)據(jù)的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-04-04