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>