如何為vuex實現(xiàn)帶參數(shù)的 getter和state.commit
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頁面調用:
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 就是了。
})
}
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue MVVM模型與data及methods屬性超詳細講解
MVVM旨在利用WPF中的數(shù)據綁定函數(shù),通過從視圖層中幾乎刪除所有GUI代碼(代碼隱藏),更好地促進視圖層開發(fā)與模式其余部分的分離,這篇文章主要介紹了Vue MVVM模型與data及methods屬性2022-10-10
淺析webpack-bundle-analyzer在vue-cli3中的使用
這篇文章主要介紹了webpack-bundle-analyzer在vue-cli3中的使用,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
vue項目中輪詢狀態(tài)更改方式(鉤子函數(shù))
這篇文章主要介紹了vue項目中輪詢狀態(tài)更改方式(鉤子函數(shù)),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10
antd design table更改某行數(shù)據的樣式操作
這篇文章主要介紹了antd design table更改某行數(shù)據的樣式操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10

