Todo List: 新增编辑任务，localStorage + Vuex实现本地存储 - 第二章

前言

在第一章中，我们的Todo List已经初现锥形，本章节我们对页面优化，同时让数据实现本地存储。主要用到localStorage + Vuex来实现页面交互和存储功能。

本次《todo list: Vue待办事项任务管理》，分为一下章节，有兴趣的同学可以持续关注。
第一章: 初识（项目搭建、基本功能组件实现）
第二章: 数据动态化处理（localStorage + Vuex），可新增，可编辑
第三章：待办事项自定义分组
第四章：待办事项添加描述图片等信息
第五章：可线上操作，入库Mysql
第六章：多人协同处理待办事项，权限管理
第七章：完结：线上发布

初步定义7个章节，实际开发中有可能有所增减。

localStorage + Vuex实现本地存储

在这之前了，没有了解Vuex的同学，可以先去看看以下文章：
《Vuex是什么？Vuex能做什么？Vuex怎么使用？》
《Vuex+localStorage数据状态持久化》

如果你没有看过，一定要去了解一下，本篇文章相关部分不会过多介绍了，详细的还是去看上面推荐文章。

这里我们先安装store2, store的插件就是把storage的set、get等进行封装，使用起来更方便。

npm i store2 -S

然后新建commons/storage.js，内容如下：

import storage from 'store2'

// 缓存数据的key
const TODO_LIST_DATA = 'TODO_LIST_DATA'

export const todoStorage = {
  set setTodoList (val) {
    if (!val) {
      storage.remove(TODO_LIST_DATA)
    } else {
      storage.set(TODO_LIST_DATA, val)
    }
  },
  get getTodoList () {
    return storage.get(TODO_LIST_DATA)
  }
}

然后新建store/index.js，store/mutations.js，store/actions.js，store/getters.js，store/types.js，下面主要展示mutations.js、index.js、types.js的内容，其他2个文件后续又用，先放着。

此时项目结构：

store/types.js内容：

'use strict'

export const M_ADD_TODO_LIST_ITEM = 'M_ADD_TODO_LIST_ITEM'

store/mutations.js内容：

'use strict'

import * as types from './types'
import moment from 'moment'
import { todoStorage } from '../commons/storage'

const mutations = {
  [types.M_ADD_TODO_LIST_ITEM] (state, data) {
    // 任务拖动任务后更新storage
    if (!data) {
      todoStorage.setTodoList = state.todoData
    } else {
      // 修改单个任务
      if (data.item.id) {
        state.todoData.map(groupItem => {
          groupItem.list.map((item, index) => {
            // 从这个list中找到任务，修改
            if (item.id === data.item.id) {
              item = data.item
              groupItem.list.splice(index, 1, item)
            }
          })
          return groupItem
        })
        todoStorage.setTodoList = state.todoData
      } else { // 新增任务，data.index是任务分组下标，新增到对应分组
        let list = state.todoData[data.index].list
        data.item.id = moment().valueOf()
        list.push(data.item)
      }
      todoStorage.setTodoList = state.todoData
    }
  }
}
export default mutations

这里的M_ADD_TODO_LIST_ITEM方法，我先解释一下。里面涉及到更新整个任务list，更新单个任务，新增任务。
1、如果传入的data是空，那就是更新整个任务list，用于任务拖动
2、如果传入的data有值，并且data.item.id有值，表示修改单个任务，从整个任务list中找出要更新的任务，更新掉。
3、如果data.item.id没有值，表示新增任务。

store/index.js内容：

'use strict'
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import mutations from './mutations'
import getters from './getters'
import { todoStorage } from '../commons/storage'

Vue.use(Vuex)

let state = {
  todoData: todoStorage.getTodoList || [{
    title: '待处理',
    list: []
  }, {
    title: '进行中',
    list: []
  }, {
    title: '已完成',
    list: []
  }]
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

然后修改一下main.js

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入store
import store from './store'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

components/list.vue

html部分

<div id="list" class="clearfix">
  <div class="list-group" v-for="(item, index) in listData" :key="index">
    <div class="list-title">{{item.title}}
      <span class="add-item" @click="addItem(index)">+</span>
    </div>
    <draggable
      class="draggable"
      :class="{active:current===index}"
      :data-index="index"
      :move="onMoveCallback"
      :list="item.list"
      v-bind="dragOptions"
      @end="endDrag"
      @start="drag = true"
      group="people"
    >
      <transition-group type="transition" :name="!drag ? 'flip-list' : null">
        <div class="draggable-item" v-for="element in item.list" :key="element.id" @click="editListItem(element)">
          <list-item :objData="element"></list-item>
        </div>
      </transition-group>
    </draggable>
  </div>
</div>

<c-dialog
  ref="itemDetail"
  :title="listItem.id ? '编辑': '新增'"
  cancelBtn="取消"
  confirmBtn="确认"
  @confirm="itemDetailConfirm"
>
  <div class="item-detail">
    <ul>
      <li class="dis-flex">
        <div class="w-80">概要</div>
        <div class="flex1">
          <input type="text" v-model="listItem.name">
        </div>
      </li>
      <li class="dis-flex">
        <div class="w-80">描述</div>
        <div class="flex1">
          <textarea v-model="listItem.description" id="" cols="30" rows="10"></textarea>
        </div>
      </li>
      <li class="dis-flex">
        <div class="w-80">优先级</div>
        <div class="flex1">
          <select  v-model="listItem.level" id="">
            <option value="0">普通</option>
            <option value="1">紧急</option>
            <option value="2">非常紧急</option>
          </select>
        </div>
      </li>
    </ul>
  </div>
</c-dialog>

js部分

methods: {
  // 停止拖动，更新整个list
  endDrag () {
    this.current = ''
    this.drag = false
    this.$store.commit(types.M_ADD_TODO_LIST_ITEM)
  },
  // 提交新增/修改
  itemDetailConfirm () {
    this.$store.commit(types.M_ADD_TODO_LIST_ITEM, {
      index: this.groupIndex,
      item: this.listItem
    })
  },
  // 编辑按钮事件
  editListItem (item) {
    this.listItem = Object.assign({}, item)
    this.$refs.itemDetail.show()
  },
  // 新增按钮事件
  addItem (index) {
    this.groupIndex = index
    this.listItem = {
      name: '',
      description: '',
      level: 0
    }
    this.$refs.itemDetail.show()
  },
  // 拖动任务事件，使其经过的分组高亮
  onMoveCallback (evt, originalEvent) {
    this.current = +evt.to.parentElement.dataset.index
  }
}

任务拖动：

编辑新增预览：

整个任务结构数据预览：

总结

本章节主要内容是localStorage + Vuex，使其任务数据状态持久化。后续内容会持续更新，请持续关注。同时打算推出相关视频，让大家学习起来更简单明了。