如何為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 就是了。 }) } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue MVVM模型與data及methods屬性超詳細講解
MVVM旨在利用WPF中的數據綁定函數,通過從視圖層中幾乎刪除所有GUI代碼(代碼隱藏),更好地促進視圖層開發(fā)與模式其余部分的分離,這篇文章主要介紹了Vue MVVM模型與data及methods屬性2022-10-10淺析webpack-bundle-analyzer在vue-cli3中的使用
這篇文章主要介紹了webpack-bundle-analyzer在vue-cli3中的使用,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10