demo--实际运用vuex

主要是运用vuex实现一个TODOList

首先借助antd绘制出对应的样式

1、 第一步就是把列表数据存到store.state中，在mapState中结构出来供组件作为数据源。

2、 第二，把输入框进行双向绑定，一开始想到的是v-model，但是官方文档解释说，v-model会尝试直接修改state的数据，而非通过mutation修改，故会报错。解决的方式是利用数据绑定，通过input或change事件的回调mutation，进而修改state，

<a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" @change="handler"/>

handler (e) {
      console.log(e.target.value)
      this.$store.commit('setList', e.target.value)
    },

3、 第三，删除对应的列表项。由于每个列表项都有id，可以通过id进行数组分割

delItem (id) {
      console.log(id)
      this.$store.commit('removeItem', id)
    },

removeItem (state, id) {
      const i = state.list.findIndex(x => x.id === id)
      if (i !== -1) {
        state.list.splice(i, 1)
      }
    },
    

4、 第四，左下角‘剩余’字样实现，这个利用getter，对原列表数组进行包装而不修改原数组，通过对象内的flag进行过滤，把过滤后的数组长度返回，使用mapGetters来结构使用。

unDone (state) {
      return state.list.filter(x => x.done === false).length
    },

5、 第五，列表状态修改和显示相应状态，方法和操作list一样,不赘述。显示相应状态也是通过getters实现。

showAll (state) {
      if (state.view === 'all') {
        return state.list
      } else if (state.view === 'undone') {
        return state.list.filter(x => x.done === false)
      } else if (state.view === 'done') {
        return state.list.filter(x => x.done === true)
      }
      return state.list
    },

此时，列表数据源应该由list变成该数据监听后的新数据源。 <a-list bordered :dataSource="showAll" class="dt_list">

实现完成。