专栏首页web秀Todo List: 新增编辑任务,localStorage + Vuex实现本地存储 – 第二章

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

前言

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

localStorage + Vuex实现本地存储

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

这里我们先安装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.jsstore/mutations.jsstore/actions.jsstore/getters.jsstore/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,使其任务数据状态持久化。后续内容会持续更新,请持续关注。同时打算推出相关视频,让大家学习起来更简单明了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue全局指令:如何添加全局指令?(附2个常用自定义指令)

    前面有专门的文字,讲过Vue指令,以及如何使用指令,今天就来讲讲如何添加全局指令,并且附上2个非常适用的例子。

    Javanx
  • 从零开始搭建 VUE + Element UI后台管理系统框架

    后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容。比如阿里云、七牛云、头条号、百家号等等,他们的管理系统都是这样的。

    Javanx
  • CSS3实现3D水晶立方体效果

    前段时间写过一篇《CSS3实现美美哒的图片倒影效果》,里面最后一步,“我们使倒影倾斜一个角度,让整个倒影效果更具有立体效果”,不知道大家有没有联想到用倾斜,我们...

    Javanx
  • nodejs+express+jade给我baby做个小相册

    去年年底迎来了my little star。从此人生多了一个最重要的牵挂。生了宝宝全家人都太忙了。最近宝宝稍微大点了,终于有空可以研究下技术了。这是14年第一帖...

    kklldog
  • 多种方法爬取猫眼电影并分析(附代码)

    摘要: 作为小白,爬虫可以说是入门python最快和最容易获得成就感的途径。因为初级爬虫的套路相对固定,常见的方法只有几种,比较好上手。选取网页结构较为简单的猫...

    Python中文社区
  • 使用 Cloudflare Worker 免费搭建网址导航网站

    GitHub:https://github.com/sleepwood/CF-Worker-Dir/ CloudFlare Worker:https://wor...

    Inkedus
  • 排查 Node.js 服务内存泄漏,没想到竟是它?

    团队最近将两个项目迁移至 degg 2.0 中,两个项目均出现比较严重的内存泄漏问题,此处以本人维护的埋点服务为例进行排查。服务上线后内存增长如下图,其中红框为...

    五月君
  • iOS音频播放器锁屏歌词显示与性能优化 原

        前边有博客探讨了有关iOS开发中音频播放的技术与进行后台音频播放并在后台与用户进行交互的方法,本篇将探讨一种在锁屏界面同步显示歌词歌词的方法,并在应用性...

    珲少
  • 广电时钟系统解决方案

    随着自动化播出的普遍应用,时钟系统作为基础设备,它的稳定运行对于广电行业有着重要的意义。是电视节目播出自动化、演播室、外来信号(包括卫星信号、转播车信号、微波信...

    时频专家
  • 循环中的异步&&循环中的闭包

    foo函数下的index输出5,全局下的index不存在 现在我们把var 换为let

    陌上寒

扫码关注云+社区

领取腾讯云代金券