各アイテムのVuexゲッター

Question

私は、Vuexストアの各アイテムに計算されたプロパティを追加する方法を見つけようとしています。たとえば、Todoリストアプリケーションでは、各TodoアイテムにDueDateとCompletedフラグが設定されています。これらのプロパティに基づいて、Todoアイテムが期限切れであるかどうかを計算することができます。

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

しかし、これは計算は、各コンポーネントのために実装する必要がありますを意味します

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を使用して、コンポーネントレベルで計算されたプロパティを追加してきました。この単純なことは大したことではありませんが、より複雑な計算のためには、私はむしろ1か所に配置したいと考えています。店舗でこれを達成する方法はありますか、またはこのパターンを使用し続ける必要がありますか？それとも、私は行方不明ですか？

Answer 1

getterは、Vuexストアでマッピングを行うことができます。 getter関数は、最初にアクセスされたときに実行され（その戻り値がキャッシュされます）従属状態が更新されない限り、そのゲッターへのその後の参照はキャッシュされた値を返します。この場合、ゲッター関数は再び実行されます。

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>