基于vue+vuex+localStorage开发的本地记事本-白红宇

基于vue+vuex+localStorage开发的本地记事本

阅读量：4085 次

发布时间：2019-05-25

本文共 3809 字，大约阅读时间需要 12 分钟。

本文采用vue2.0+vuex+localStorage+sass+webpack，实现一个本地存储的记事本。兼容PC端和移动端。在线预览地址：

功能说明

支持回车添加事件

支持事件状态切换
- 添加事件 -> 进入未完成列表
- 未完成 -> 已完成(勾选checkbox)
- 未完成 -> 已取消(点击取消按钮)
- 已完成 -> 未完成(取消勾选checkbox)
- 已取消 -> 未完成(点击恢复按钮)

支持控制台打印所有事件数据

支持编辑事件

支持删除事件

支持清空所有事件

支持本地化存储

支持折叠面板

项目笔记

本项目是使用vue-cli脚手架生成的项目，项目代码可以到我的github上clone下来。clone下来之后可进入文件目录

// 执行npm install// 安装依赖完成之后再执行npm run dev// 即可在本地开启 http://localhost:8080 访问该项目

github地址：

demo地址：

一、目录结构

|——notepad/|   |——build/|   |——confg/|   |——node_modules/|   |——src/|   |   |——assets/|   |   |——components/|   |   |   |——add_event.vue       //添加事件组件|   |   |   |——dialog.vue          //弹出框组件|   |   |   |——event_table.vue     //表格组件|   |   |   |——header.vue          //头部组件|   |   |   |——tools.vue           //工具栏组件|   |   |——store/                  //存放vuex代码|   |   |   |——actions.js          //vuex的action文件|   |   |   |——index.js            //vuex核心代码|   |   |——App.vue                 //父组件|   |   |——main.js                 //入口文件|   |——static/|   |——.babelrc|   |——.editorconfig|   |——.gitgnore|   |——index.html|   |——package.json|   |——README.md

二、主要难点

1.折叠面板

难点：点击折叠面板title,要动画实现sliderUp和sliderDown，但是div高度auto，使用transition： height .3s无效。

解决方法：点击时候获取div高度值，赋值给style.height，然后再改变高度为0，这样transition才会生效。

代码如下：

2.切换状态

难点：在不同的状态间切换，实时地把事件在不同状态列表中显示出来

解决方法：利用vuex进行状态管理，把所有事件和状态存储在store对象中，在组件中通过计算属性获得事件，因此就有了实时性。

代码如下：

// store/index.jsimport Vue from 'vue';import Vuex from 'vuex';import * as actions from './actions.js';Vue.use(Vuex);const state = {    event: []  // event,用来存储所有事件}const mutations = {    EVENTDONE(states,obj){  // EVENTDONE，用来修改事件的状态为已完成        for (let i = 0; i < states.event.length; i++) {            if (states.event[i].id === obj.id) {                states.event[i].type = 2;   // type == 2,表示状态为已完成                break;            }        }    }}export default new Vuex.Store({    state,    actions,    mutations})// store/actions.jsexport const eventdone = ({ commit }, param) =>{    commit('EVENTDONE',{
  id: param});}// App.vue

3.本地存储

知识点：localStorage是HTML5提供的一种在客户端存储数据的新方法，没有时间限制，第二天、第二周或下一年之后，数据依然可用。

用法：

1）存储数据：localStorage.setItem(item, value)2）获取数据：localStorage.getItem(item)3）移除数据：localStorage.removeItem(item)

代码如下：

// store/index.jsconst LocalEvent = function(item){          // 定义一个本地存储的构造函数    this.get = function () {                // 存数据        return JSON.parse(localStorage.getItem(item)) || [];    }    this.set = function (obj) {             // 拿数据        localStorage.setItem(item,JSON.stringify(obj));    }    this.clear = function () {              // 删数据        localStorage.removeItem(item);    }}const local = new LocalEvent('lx_notepad'); // 创建一个本地存储的事例const state = {    event: local.get()}const mutations = {    ADDEVENT(states,obj){                   // ADDEVENT，添加新的事件，并存储到localStorage里        states.event.unshift(obj.items);        local.set(states.event);    }}

4.父子组件间的通讯

知识点：组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。

1）父组件可以使用 props 把数据传给子组件。2）子组件可以使用 $emit 触发父组件的自定义事件。

代码如下：

// App.vue
   // dialog.vue

手机预览地址：

github地址：

demo地址：

总结

虽然只是做了个小小的记事本，但是我感觉收获还是很大的，很多知识点掌握得更加的牢固。这个记事本只做了一个页面，就没有用vue-router，路由也是vue里很强大的功能。做这个记事本的初衷，是因为在工作中，我都会把最近要做的事情给记在本子上，完成之后就会打钩，所以想把这个给放到电脑上去实现。接下来我还会继续扩展功能，比如搜索。

转载地址：http://jphni.baihongyu.com/

你可能感兴趣的文章