点击右上方红色按钮关注“web秀”,让你真正秀起来
前言
在第一章中,我们的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'// 缓存数据的keyconst 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'// 引入storeimport store from './store'Vue.config.productionTip = falsenew Vue({ el: '#app', router, store, components: { App }, template: ''})
components/list.vue
html部分
{{item.title}} +
概要
描述
优先级
普通紧急非常紧急
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,使其任务数据状态持久化。后续内容会持续更新,请持续关注。同时打算推出相关视频,让大家学习起来更简单明了。
公告
喜欢小编的点击关注,了解更多知识!
源码地址,可以点击下方“了解更多”获取!