基於vue2.0+vuex+localStorage開發的本地記事本

本文采用vue2.0+vuex+localStorage+sass+webpack，實現一個本地存儲的記事本。兼容PC端和移動端。在線預覽地址：DEMO

功能說明

• 支持回車添加事件
• 支持事件狀態切換
  
  • 添加事件 -> 進入未完成列表
  • 未完成 -> 已完成(勾選checkbox)
  • 未完成 -> 已取消(點擊取消按鈕)
  • 已完成 -> 未完成(取消勾選checkbox)
  • 已取消 -> 未完成(點擊恢復按鈕)
• 支持控制檯打印所有事件數據
• 支持篩選事件
• 支持編輯事件
• 支持刪除事件
• 支持清空所有事件
• 支持本地化存儲
• 支持摺疊面板

項目筆記

本項目是使用vue-cli腳手架生成的項目，項目代碼可以到我的github上clone下來。clone下來之後可進入文件目錄

// 執行
npm install
// 安裝依賴完成之後再執行
npm run dev
// 即可在本地開啓 http://localhost:8080 訪問該項目

// 如果 node-sass 安裝失敗，可使用 cnpm 安裝
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm -v             // 查看cnpm版本號確認安裝成功
cnpm install node-sass -D

//安裝成功後再看看是否可以正確運行了

github地址：https://github.com/lin-xin/notepad

demo地址：http://blog.gdfengshuo.com/example/notepad/

一、目錄結構

|——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纔會生效。

代碼如下：

<template>
    <div id="app">
        <div class="event-tab" @click="changeCollapse(0,$event)">未完成</div>
           <ul class="event-box" :style="{'height':'auto','display':'block'}">
               <li class="event-list" v-for="value in getToDo">
                   <div>{{value.content}}</div>
               </li>
           </ul>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                collapse:[
                    {
                        show: true,                     // show == true, 表示當前摺疊面板顯示
                        contentHeight: 'auto'           // contentHeight, 存儲當前摺疊面板高度
                    }
                ]
            }
        },
        methods:{
            changeCollapse(num,event){                  // 根據摺疊面板當前狀態進行顯示或摺疊
                if(this.collapse[num].show){
                    this.closeCollapse(num,event);
                    this.collapse[num].show = false;
                }else{
                    this.openCollapse(num,event);
                    this.collapse[num].show = true;
                }
            },
            closeCollapse(num,event){                   // closeCollapse，關閉摺疊面板
                const ulElement = event.currentTarget.nextElementSibling;
                ulElement.style.height = ulElement.offsetHeight + 'px';
                this.collapse[num].contentHeight = ulElement.offsetHeight;
                setTimeout(function () {
                    ulElement.style.height = '0px';
                    setTimeout(function () {
                        ulElement.style.display = 'none';
                    },300)
                },10)

            },
            openCollapse(num,event){                    // openCollapse，顯示摺疊面板
                const ulElement = event.currentTarget.nextElementSibling,
                        self = this;
                ulElement.style.display = 'block';
                setTimeout(function () {
                    ulElement.style.height = self.collapse[num].contentHeight + 'px';
                    setTimeout(function () {
                        ulElement.style.height = 'auto';
                    },300)
                },10)
            }
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss">
    ul.event-box{
           list-style: none;
           overflow: hidden;
           border:{
               left:1px solid #eee;
               right:1px solid #eee;
           }
           transition: height .3s;                          // transition，添加摺疊或顯示時的動畫效果
    }
</style>

2.切換狀態

難點：在不同的狀態間切換，實時地把事件在不同狀態列表中顯示出來

解決方法：利用vuex進行狀態管理，把所有事件和狀態存儲在store對象中，在組件中通過計算屬性獲得事件，因此就有了實時性。

代碼如下：

// store/index.js
import 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.js
export const eventdone = ({ commit }, param) =>{
    commit('EVENTDONE',{id: param});
}

// App.vue
<template>
    <div id="app">
           <ul class="event-box">
               <li class="event-list" v-for="value in getToDo">
                   <input type="checkbox" @click="moveToDone(value.id,$event)">
                   <div>{{value.content}}</div>
               </li>
           </ul>
    </div>
</template>
<script>
    export default {
        computed:{
            getToDo(){    // getToDo，實時獲取狀態爲未完成的事件
                return this.$store.state.event.filter(function(d){
                    if(d.type === 1){   // type == 1，表示狀態爲未完成
                        return d;
                    }
                });
            }
        },
        methods:{
            moveToDone(id,event){  // moveToDone，選中checkbox將事件移至已完成
                this.$store.dispatch('eventdone',id);
            }
        }
    }
</script>

3.本地存儲

知識點：localStorage是HTML5提供的一種在客戶端存儲數據的新方法，沒有時間限制，第二天、第二週或下一年之後，數據依然可用。

用法：

1）存儲數據：localStorage.setItem(item, value)
2）獲取數據：localStorage.getItem(item)
3）移除數據：localStorage.removeItem(item)

代碼如下：

// store/index.js
const 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 = local.get() || {
    event: [],
    count: 0
}
const mutations = {
    ADDEVENT(states,obj){                   // ADDEVENT，添加新的事件，並存儲到localStorage裏
        states.count++;
        obj.items.id = states.count;
        states.event.unshift(obj.items);
        local.set(states);
    }
}

4.父子組件間的通訊

知識點：組件實例的作用域是孤立的。這意味着不能並且不應該在子組件的模板內直接引用父組件的數據。

1）父組件可以使用 props 把數據傳給子組件。
2）子組件可以使用 $emit 觸發父組件的自定義事件。

代碼如下：

// App.vue
<template>
    <div id="app">
        // 通過 isShow、msg 把數據傳個子組件，監聽自定義事件cancel、sure。
        <n-dialog :is-show="dialog" :msg="tips" @cancel="dialog = false" @sure="sureDialog"></n-dialog>
    </div>
</template>
<script>
    import nDialog from './components/dialog.vue';
    export default {
        data(){
            return {
                dialog: true,
                tips: '清除後無法恢復，確認清除嗎？'
            }
           },
        components: {
            nDialog
        },
        methods:{
            sureDialog(){
                this.$store.dispatch('clearevent');
                this.dialog = false;
            }
        }
    }
</script>

// dialog.vue
<template>
    <div class="dialog" :class="{'dialog-show':isShow}">
        <div class="dialog-wrapper">
            <div class="dialog-content">
                {{msg}}
            </div>
            <div class="dialog-btns">
                <button type="button" class="cancel-btn" @click="cancelEvent">取消</button>
                <button type="button" class="sure-btn" @click="sureEvent">確定</button>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props:['isShow','msg'],  // 通過 props 屬性獲得父組件傳遞過來的數據
        methods: {
            cancelEvent(){
                this.$emit('cancel');  // 取消按鈕觸發父組件的 cancel 自定義事件
            },
            sureEvent(){
                this.$emit('sure');    // 確認按鈕觸發父組件的 sure 自定義事件
            }
        }
    }
</script>

5.篩選功能

功能描述：可根據 類型 和 關鍵詞 進行篩選

知識點：在返回所有事件的計算屬性上，使用過濾器( filter )，進行對 type 和 content 的篩選，返回符合條件的事件。

代碼如下：

<script>
   export default {
       data: function(){
           return {
               screen_type: 0,                                                      // 篩選類型，0 表示不篩選
               screen_title: '',                                                    // 篩選關鍵詞，'' 表示不篩選
           }
       },
       computed:{
           notapad(){
               var self = this;
               return self.$store.state.event.filter(function(d){                  // 使用過濾器
                   if(self.screen_type !== 0 && self.screen_title === ''){          // 只篩選類型
                       if( d.type === self.screen_type ){
                           return d;
                       }
                   }else if(self.screen_type !== 0 && self.screen_title !== ''){    // 篩選類型和關鍵詞
                       if( d.type === self.screen_type && d.content.indexOf(self.screen_title) !== -1){
                           return d;
                       }
                   }else if(self.screen_type === 0 && self.screen_title !== ''){    // 只篩選關鍵詞
                       if(d.content.indexOf(self.screen_title) !== -1){
                           return d;
                       }
                   }else{                                                           // 不進行篩選
                       return d;
                   }
               });
           }
       }
}   
</script>

總結

雖然只是做了個小小的記事本，但是我感覺收穫還是很大的，很多知識點掌握得更加的牢固。這個記事本只做了一個頁面，就沒有用vue-router，路由也是vue裏很強大的功能。
做這個記事本的初衷，是因爲在工作中，我都會把最近要做的事情給記在本子上，完成之後就會打鉤，所以想把這個給放到電腦上去實現。

01-25：添加篩選功能

02-07：修復issues 取消事件的bug #1