如何為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中已經(jīng)幫我們控制臺輸出警告，并且不會讓組件中的data合并到options中去，那么，很友好的處理了開發(fā)者的強(qiáng)行將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）詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了vue一直自動換行的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
最近在做自己項目中遇到一個非常簡單的功能,跟大家分享下,這篇文章主要給大家介紹了關(guān)于使用vue寫一個翻頁的時間插件的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
本文主要介紹在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?單獨繪制省份,首先引入所需要的第三方模塊，通過示例代碼給大家介紹的非常詳細(xì)，文章末尾給大家補(bǔ)充介紹了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