Vuex getter爲每個項目

Question

我想找出一種方法來爲Vuex商店中的每個項目數組添加計算屬性。例如，在待辦事項列表應用程序中，每個待辦事項項目可能都有DueDate和一個完成標誌。基於這些屬性，我們可以計算Todo項目是否過期。

import Vue from 'vue'; 
import Vuex from 'vuex'; 
Vue.use(Vuex); 
export default new Vuex.Store({ 
    state: { 
     Todos: [] 
    }, 
    mutations: { /* ... */ }, 
    actions: {/* ... */ } 
); 

let exampleTodo = { 
    Title: 'Go grocery shopping', 
    Completed: false, 
    DueDate: new Date("10/12/2017") 
}; 

到目前爲止，我已經加入了計算性能，在使用mapState這樣的組件級：

computed: { 
    ...mapState({ 
     todos: state => state.Todos.map(t => { 
      // Add some computed fields 
      return { 
       ...t, 
       OverDue: !t.Completed && Date.now() > t.DueDate 
      }; 
     }) 
    }) 
} 

但這意味着需要爲每個組件來實現計算。對於這樣簡單的事情來說這不是什麼大問題，但是對於更復雜的計算，我寧願將它們放在一個地方。有沒有辦法在商店中實現這一點，還是應該繼續使用這種模式？還是有什麼我失蹤？

Answer 1

您可以使getter在Vuex存儲中執行映射。第一次訪問getter函數時會運行（及其返回值緩存）。任何對該getter的後續引用都將返回緩存的值，除非更新依賴狀態，在這種情況下，getter函數將再次運行。

Here's the documentation on Vuex getters.

下面是一個例子：

const store = new Vuex.Store({ 
 
    state: { 
 
    todos: [] 
 
    }, 
 
    mutations: { 
 
    SET_TODOS(state, todos) { 
 
     state.todos = todos; 
 
    } 
 
    }, 
 
    getters: { 
 
    todos(state) { 
 
     return state.todos.map(t => { 
 
     return { 
 
      ...t, 
 
      OverDue: !t.Completed && Date.now() > t.DueDate 
 
     } 
 
     }) 
 
    } 
 
    } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    store, 
 
    created() { 
 
    let todos = [{ 
 
     Title: 'Go grocery shopping', 
 
     Completed: false, 
 
     DueDate: new Date("10/12/2017") 
 
    }, { 
 
     Title: 'Get a haircut', 
 
     Completed: false, 
 
     DueDate: new Date("10/10/2017") 
 
    }]; 
 
    
 
    this.$store.commit('SET_TODOS', todos) 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.1/vuex.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script> 
 

 
<div id="app"> 
 
    {{ $store.getters.todos }} 
 
</div>