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组件，完善功能

• 创建 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
    } 
  }
})