Vuex 学习总结 —— 完整案例

目录结构

components

• /src/components/TodoFooter.vue

<template>
  <div>
    <label>
      <input type="checkbox" v-model="checkAll"/>
    </label>
    <span>
          <span>已完成{
   {
   completeSize}}</span> / 全部{
   {
   totalSize}}
        </span>
    <button v-show="completeSize" @click="deleteAllCompleted">清除已完成任务</button>
  </div>
</template>

<script>
  import {
   mapGetters} from 'vuex'
  export default {
   
    computed: {
   
      ...mapGetters(['totalSize', 'completeSize']),

      checkAll: {
   
        get () {
    // 决定是否勾选
          return this.$store.getters.isAllSelect
        },

        set (value) {
   // 点击了全选checkbox  value是当前checkbox的选中状态(true/false)
          // this.selectAll(value)
          this.$store.dispatch('selectAll', value)
        }
      },
    },

    methods: {
   
      deleteAllCompleted () {
   
        if(window.confirm('确定清除已完成的吗?')) {
   
          // this.deleteCompleteTodos()
          this.$store.dispatch('deleteCompleteTodos')
        }
      }
    }
  }
</script>

• /src/components/TodoHeader.vue

<template>
  <div>
    <input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="inputTodo" @keyup.enter="add"/>
  </div