Vuex案例ToDoList

Vuex学习

• 使用UI：ant-design-vue 修改main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store.js'

// 导入 ant-design-vue 组件库
import Antd from 'ant-design-vue'
// 导入组件库的样式表
import 'ant-design-vue/dist/antd.css'

Vue.config.productionTip = false
// 注册组件库
Vue.use(Antd)

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

• 修改App.vue组件，完善功能

<template>
  <div>
    <a-input placeholder="请输入任务" class="my_ipt" :value="inputValue"  @change="handleInputChange"/>
    <a-button type="primary" @click="addItemToList">添加事项</a-button>
    <a-list border :dataSource="infoList" class="dt_list">
       <a-list-item slot="renderItem" slot-scope="item">
        <!-- 复选框 -->
        <a-checkbox :checked="item.done" @change="(e, item.id) => { cbStatusChanged(e) }">{{ item.info }} </a-checkbox>
         <!-- 删除链接 -->
        <a slot="action" @click="removeItemById(item.id)"> 删除 </a>
      </a-list-item>
      <!-- footer区域 -->  
      <div slot="footer" class="footer">
         <!-- 未完成任务条数 -->
         <span>{{ unDoneLength }}条剩余</span>
         <!-- 操作按钮 -->
         <a-button-group>
          <a-button :type="viewKey === 'all' ? 'primary' : 'default' " @click="changeList('all')">全部</a-button>
          <a-button :type="viewKey === 'unDone' ? 'primary' : 'default' " @click="changeList('undone')">未完成</a-button>
          <a-button :type="viewKey === 'done' ? 'primary' : 'default' " @click="changeList('done')">已完成</a-button>
         </a-button-group>
         <!-- 把已经完成的任务清空 -->
         <a @click="clean">清除已完成</a>
      </div> 
    </a-list>
  </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'

 export default {
  name: 'app',
  data() {
    return {
     
    }
  },
  created() {
      // 调用 store 中的方法
      this.$store.dispatch('getList')
  },
  computed: {
    // 按需导入 store 中的 state 映射计算属性
    ...mapState(['inputValue', 'viewKey'])
    ...mapGetters(['unDoneLength', 'infoList'])
  },
  methods: {
    // 监听输入文本框内容变化
    handleInputChange(e) {
      this.$store.commit('setInputValue', e.target.value)
    },
    // 向列表中新增 item 项
    addItemToList() {
      if(this.inputValue.trim().length <= 0) {
        return this.$message.warning('文本框的内容不能为空！')
      }
      this.$store.commit('addItem')
    }
  },
  // 根据 Id 删除对应的事项
  removeItemById(id) {
    this.$store.commit('removeItem', id)
  },
 // 监听复选框选中状态变化的事件
  cbStatusChanged(e, id) {
    const param = {
      id: id,
      status: e.target.checked
    }
    this.$store.commit('changeStatus', param)  
  },
  // 清除已完成的任务
  clean() {
    this.$store.commit('clearnDone')
  },
  // 修改页面展示的数据列表
  changeList(key) {
    this.$store.commit('changeViewKey', key)
  }
 }
</script>
<style scoped>
 #app {
  padding: 10px;
  }
  .my_ipt {
    width: 500px;
    margin-right: 10px;
  }
  .dt_list {
    width: 500px;
    margin-top: 10px;
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
   }
</style>

• 创建 list.json 数据文件

 [
  {
    "id": 0,
    "info": "这是一件应该要完成的事情0",
    "done": false
  },
  {
    "id": 1,
    "info": "这是一件应该要完成的事情1",
    "done": false
  },
  {
    "id": 2,
    "info": "这是一件应该要完成的事情2",
    "done": false
  },
  {
    "id": 3,
    "info": "这是一件应该要完成的事情3",
    "done": false
  },
  {
    "id": 4,
    "info": "这是一件应该要完成的事情4",
    "done": false
  }
 ]

• 创建 store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'  // 导入axios 请求数据

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list: [],   // 所有任务列表
    inputValue: '',
    nextId: 5,   // 下一个ID
    viewKey: 'all'
  },
  mutations: {
    // 为 store 中的 list 赋值
    initList(state, list) {
      state.list = list
    },
    // 为 store 中的 inputValue 赋值
    setInputValue(state, val) {
      state.inputValue = val
    },
    // 添加列表项
    addItem() {
      const obj = {
        id: state.nextId,
        info: state.inputValue.trim(),
        done: false
      }
      state.list.push(obj)
      state.nextId ++
      state.inputValue = ''
    },
   // 根据 Id 删除对应的任务事项
   removeItem(state, id) {
    const i = state.list.findIndex(x => x.id === id)
    if(i !== -1) {
      state.list.splice(i, 1)
    }
   },
   // 修改列表项的选中状态
   changeStatus(state, param) {
      const i = state.list.findexIndex(x => x.id === param.id)
      if (i !== -1) {
        state.list[i].done = param.status
      }
   },
  // 清除已完成的任务
  clearnDone(state) {
    state.list = state.list.filter(x => x.done === false)
   },
  // 修改视图的关键字
  changeViewKey(state, key) {
    state.viewKey = key
   }
  },
  actions: {
    getList(context) {
      axios.get('./list.json').then(({ data }) => {
        // console.log(data)
        // 调用 mutations 中的方法更新 state
        context.commit('initList', data)
      })
    }
  },
  getters: {
    // 统计未完成的任务条数
    unDoneLength(state) {
      return state.list.filter(x => x.done === false).length
    },
    // 
    infoList() {
      if(state.viewKey === 'all') {
        return state.list
      }
      if(state.viewKey === 'unDone') {
        return state.list.filter(x=>!x.done)
      }
      if(state.viewKey === 'done') {
        return state.list.filter(x=>x.done)
      }
      return state.list
    } 
  }
})