각 항목의 Vuex getter

각 항목의 Vuex getter

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

그러나 이는 각 구성요소에 대해 계산을 구현해야 한다는 것을 의미합니다.이렇게 간단한 것은 별 문제가 되지 않지만, 좀 더 복잡한 계산은 한 곳에 모아두는 것이 좋습니다.매장에서 할 수 있는 방법이 있나요, 아니면 이 패턴을 계속 사용해야 하나요?아니면 제가 놓친 게 또 있나요?

만들 수 있습니다.getterVuex 스토어에서 매핑을 수행합니다.getter 함수는 처음 액세스할 때 실행되며 반환된 값은 캐시됩니다.종속성 상태가 업데이트되지 않는 한 해당 getter에 대한 후속 참조는 캐시된 값을 반환합니다.이 경우 getter 함수가 다시 실행됩니다.

다음은 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>

언급URL : https://stackoverflow.com/questions/46687841/vuex-getter-for-each-item