使用vuex getter重新呈现组件

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    // 定义状态
    todos: [
      { id: 1, text: '任务1', done: true },
      { id: 2, text: '任务2', done: false },
      { id: 3, text: '任务3', done: false }
    ]
  },
  getters: {
    // 定义getter
    completedTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

export default store

// MyComponent.vue
<template>
  <div>
    <h2>已完成的任务：</h2>
    <ul>
      <li v-for="todo in completedTodos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['completedTodos'])
  }
}
</script>