vuex筆記04 getters

// main.js

import Vue from 'vue'
import Vuex from 'vuex';
import App from './App.vue'

Vue.use(Vuex);

Vue.config.productionTip = false

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length;
    },
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id);
    }
  }
})
console.log(store.state.count);

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

// App.vue

<template>
  <div id="app">
    Complete Todos: {{ doneTodos }}<br/>
    {{ doneTodosCount }}<br/>
    {{ getTodoById }}
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    doneTodos () {
      return this.$store.getters.doneTodos;
    },
    doneTodosCount () {
      return this.$store.getters.doneTodosCount;
    },
    getTodoById () {
      return this.$store.getters.getTodoById(2);
    }
  }
}
</script>