Uncached Getters

by Michael Gallagher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
<script src="https://unpkg.com/vue-pursue@0.1.3/dist/vue-pursue.js"></script>
<script type="text/x-template" id="comp">
  <div>{{ task.name }}<br/>
    <pre>{{ Date.now() }}</pre>
  </div>
</script>


<div id="app" />
<div class="output" />

JavaScript

const store = new Vuex.Store({
  state: {
    tasks: {
      1: { id: 1, name: 'Setup' },
      2: { id: 2, name: 'Impl' },
      3: { id: 3, name: 'Testing' },
    },
  },
  getters: {
    mappedTask: (state) => (id) => ({
      name: state.tasks[id].name.toUpperCase(), 
    }),
  },
  mutations: {
    changeOne: (state) => {
      state.tasks[1].name = 'Preparation';
    },
  },
});

const comp = {
  props: ['task'],
  template: '#comp',
}

new Vue({
  store,
  el: '#app',
  components: {
    Comp: comp
  },
  computed: {
    mappedTasks() {
      return Object.keys(this.$store.state.tasks)
       .map(this.$store.getters.mappedTask);
    },
  },
  template: '<div><Comp v-for="task in mappedTasks" :task="task" :key="task.id"/></div>',
  mounted() {
    setTimeout(() => {
      this.$store.commit('changeOne');
    }, 3000);
  }
})