js清空本地存储_Todo List: 新增编辑localStorage+Vuex实现本地存储 - 第二章

点击右上方红色按钮关注“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，使其任务数据状态持久化。后续内容会持续更新，请持续关注。同时打算推出相关视频，让大家学习起来更简单明了。

公告

喜欢小编的点击关注，了解更多知识！

源码地址，可以点击下方“了解更多”获取！