[Vue.js] Vuex 學習筆記(6) - mapState 與mapGetters 合併使用

合併使用我們在實際開發時， computed 內容並不會像前兩章的範例那樣簡單，有時我們需要將本地組件的computed 或是mapState 與mapGetters 混合使用。

0% 合併使用我們在實際開發時，computed內容並不會像前兩章的範例那樣簡單，有時我們需要將本地組件的computed或是mapState與mapGetters混合使用。

通常我們要使用一個工具函數將多個物件合併為一個，以使我們可以將最終的物件傳給computed屬性，但自從有了物件展開運算符，我們就可以將寫法大大的簡化。

mapState與mapGetters函數返回的是一個物件 物件展開運算符(ObjectSpreadOperator)使用物件展開運算符之前我們要先知道展開運算符(Spreadsyntax)，了解後再看下面的程式碼就會很清楚的知道使用方式。

Vuex123456789101112131415161718192021222324252627conststore=newVuex.Store({state:{count:0,todos:[{id:1,text:'...',done:true},{id:2,text:'...',done:false}]},getters:{doneTodos:state=>{returnstate.todos.filter(todo=>todo.done)},doneTodosCount:(state,getters)=>{returngetters.doneTodos.length},getTodoById:(state)=>(id)=>{returnstate.todos.find(todo=>todo.id===id)}}}); component1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 TableofContents Overview 1.合併使用2.物件展開運算符(ObjectSpreadOperator) JeremySu FullStackDeveloper 44 posts 13 categories 88 tags GitHub Instagram