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

  • 2019 年 12 月 5 日
  • 筆記

本文作者：IMWeb 林鑫 原文出處：IMWeb社區 未經同意，禁止轉載

本文採用vue2.0+vuex+localStorage+sass+webpack，實現一個本地存儲的記事本。

功能說明

  • 支援回車添加事件
  • 支援事件狀態切換
    • 添加事件 -> 進入未完成列表
    • 未完成 -> 已完成(勾選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://test.omwteam.com/

一、目錄結構

|——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](/user/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](/user/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](/user/cancel)="dialog = false" [@sure](/user/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](/user/click)="cancelEvent">取消</button>                  <button type="button" class="sure-btn" [@click](/user/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

Tags:

VirMach 便宜 VPS