Vuex实战项目—ToDoList代码及流程详解

一、安装依赖

初始化样式，安装axios、命令行管理员（终端）安装ant-design-vue@1.3.10，更改App.vue和main.js;

npm i ant-design-vue@1.3.10
vue ui

二、全部代码

main.js:
import Vue from 'vue'
import App from './App.vue'
//1、导入ant-design-vue组件库
import Antd from 'ant-design-vue'
//2、导入组件库的样式表
import 'ant-design-vue/dist/antd.css'

Vue.config.productionTip = false
//3、安装组件库
Vue.use(Antd)

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

store.js:
import Vue from 'vue'
import Vuex from 'vuex'
//导入axios,axios是异步操作，因此在actions中使用
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
   
  state: {
   
    //所有的任务数据列表
    list: [],
    //文本框的内容
    inputValue: 'aaa',
    nextId: 5,
    viewKey: 'all'
  },
  mutations: {
   
    initList(state,list) {
   
        state.list = list;
    },
    //更改inputValue的值
    setInputValue(state,val) {
   
        state.inputValue = val;
    },
    addItem(state) {
   
        const obj ={
   
            id: state.nextId,
            info: state.inputValue.trim(),
            done: false
        }
        state.list.push(obj);
        state.nextId++;  //序号自加1
        state.inputValue = '';  //添加后输入框重新为空
    },
    removeItem(state,id) {
   
      //1、根据id查找对应项的索引
      const i = state.list.findIndex(x => x.id ===