在第一章中，我们的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: ''
})
html部分
{{item.title}}
class="add-item" @click="addItem(index)">+
-
概要
-
描述
-
优先级
js部分
methods: {
// 停止拖动，更新整个list
endDrag () {
this.current = ''
this.drag = false
this.$store.commit(types.M_ADD_TODO_LIST_ITEM)
},
// 提交新增/修改
itemDetail/confirm/i () {
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，使其任务数据状态持久化。后续内容会持续更新，请持续关注。同时打算推出相关视频，让大家学习起来更简单明了。
