Question

我正在试图找出一种方法来为Vuex商店中的数组添加每个项目的计算属性。例如，在Todo列表应用程序中，每个Todo项目可能具有DueDate和Completed标志。基于这些属性，我们可以计算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.

以下是一个例子：

＆＃13;

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)
  }
})

＆＃13;

<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>

＆＃13;

每个项目的Vuex吸气剂

1 个答案: