構建一個Vuex模塊

我在嘗試保持我的Vuex模塊清潔方面遇到了一些麻煩，我希望能夠得到一些關於如何改善這一點的見解。我已經分解了一些突變，並且正在採取行動來組合多個突變，所以我認爲這是一個好的開始。構建一個Vuex模塊

在大多數例子中，我看到超級乾淨的突變，我也有這些，但是我需要檢查if語句或其他副作用。爲了提供例子：

我的行動：

setFilteredData({ state, commit }, payload) { 
    commit('setFilteredData', payload); 

    // Check if we need to split up the data into 'hotels' and 'nearby_hotels'. 
    if (state.filteredData.find(hotel => hotel.nearby_city)) { 
     commit('splitHotelsAndNearbyHotels', state.filteredData); 
    } 
}

我的突變：

splitHotelsAndNearbyHotels(state, payload) { 
    // Chunk it up into hotels and nearby hotels. 
    const composed = groupBy(payload, 'nearby_city'); 

    if (composed.true) { 
     composed.true.forEach((hotel) => { 
      if (hotel.isFirst) hotel.isFirst = false; 
     }); 

     composed.true[0].isFirst = true; 

     // Merge them back together in the right order. 
     state.filteredData = composed.false.concat(composed.true); 
    } 
}

在這個例子中，如果我的對象數組包含了酒店，hotel.nearby_city設置爲true它會執行splitHotelsAndNearbyHotels的提交。

該代碼不夠透明。該行動中的if聲明感覺不正確，我希望我的突變更清晰。

我曾想過將我的splitHotelsAndNearbyHotels分成不同的功能，但我不知道將它們放在哪裏。簡單地把它們放在Vuex文件中並不覺得將它們放在一個單獨的文件中是一個很大的改進，我猜可能是一個選項。

如何清理我的文件以提高可讀性？也許有人可以給我看一個Vuex例子，它沒有像我正在處理的理想場景。

來源

2017-09-15 Stephan-v

我不認爲行動和變異都不是真正的問題，如果有的話，他們的命名。也許有'setFilteredData'的更好的名字？ – Nit

一種方法是僅爲您的州擁有一個酒店陣列，並計算用於獲取每個經過篩選的酒店子集的屬性。這使得代碼更簡單，所以當你需要改變酒店時，無論是何種類型，都有一個數組可以搜索。我假設你只是在預設過濾器之間切換顯示的列表，因此需要更多的上下文。正確的做法會根據您的需求而有所不同。這是一個相當開放的問題，缺乏重要的背景。解釋爲什麼你要「設置」過濾的酒店，對我來說，這聽起來像一個「得到」。就像我在這裏錯過了一些東西。 –

其實你可以將你的動作代碼移動到getter中，使用單一源代碼並在getter上過濾它會更乾淨。但是，如果你堅持使用動作可以在裏面行動將您的突變代碼，並重新調整你的行爲的代碼就像這樣：

Helper.js

這是提供數據和輔助功能：

var _ = require('lodash'); 

const payloadData = [ 
    {"name":"A", "nearby_city":true, "isFirst":true}, 
    {"name":"B", "nearby_city":false, "isFirst":false}, 
    {"name":"C", "nearby_city":false, "isFirst":false}, 
    {"name":"D", "nearby_city":true, "isFirst":false} 
]; 

// assumed nearby_city is boolean 
const isNearby = (hotels) => { return !!hotels.find(hotel => hotel.nearby_city === true) }; 
const groupBy = (items, key) => { return _.groupBy(items, item => item[key]) };

Mutations.js

這是您的突變現在看起來：

const mutations = { 
    setfilteredData : (state, hotels) => { 
     state.filteredHotels = hotels || []; 
    }, 
}

Actions.js

這是你的行動，它的罰款不動你的功能集成到單獨的文件。

// separate filter function 
const filterNearby = (payload) => { 
    if(isNearby(payload) === false){ 
     return payload; 
    } 

    const composed = groupBy(payload, 'nearby_city'); 
    composed.true.forEach((hotel) => { 
     if (hotel.isFirst) hotel.isFirst = false; 
    }); 

    composed.true[0].isFirst = true; 
    return composed.false.concat(composed.true); 
}; 

const actions = { 
    setfilteredData: ({state, commit}, payload) => { 
     /** 
     * Using separate filter function 
     */ 
     commit('setfilteredData', filterNearby(payload)); 
     return; 

     /** 
     * Using restructured code 
     */ 

     // Check if we need to split up the data into 'hotels' and 'nearby_hotels'. 
     if(isNearby(payload) === false){ 
      commit('setfilteredData', payload); 
      return; 
     } 

     // Chunk it up into hotels and nearby hotels. 
     const composed = groupBy(payload, 'nearby_city'); 

     composed.true.forEach((hotel) => { 
      if (hotel.isFirst) hotel.isFirst = false; 
     }); 

     composed.true[0].isFirst = true; 

     // Merge them back together in the right order. 
     commit('setfilteredData', composed.false.concat(composed.true)); 
    } 
};

來源

2017-12-12 06:09:47 coda

構建一個Vuex模塊

回答

相關問題