本项目采用vue+vuex+localStorage，实现一个本地存储的笔记app，项目预览见demo,源码可访问我的github
项目的下载安装步骤
git clone https://github.com/Anticlimax/vue-note.git
cd vue-note
npm install
npm run dev
让我们通过这样一个有一定数据操作要求的应用，来学习vue和vuex的使用。
- 起步
首先，通过vue-cli构建基本应用模板,方便开发
npm i vue-cli -g
vue init webpack vue-note
cd vue-note
npm run dev
这样，我们就起了一个本地的开发服务器，而且可以实现热加载，设置一下编辑器的自动保存就能实时看到代码变化。
2.项目逻辑
我们开发的项目的ui如下
![OHLNC51QG}K3D%7VV37Z]L1.png](https://img.haomeiwen.com/i3599810/054054226e79bf05.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
大概分为左侧工具栏，中间笔记列表及右侧编辑栏，所以我们先构建项目的基本骨架。
//App.vue
<template>
<div id="app">
<Toolbar></Toolbar>
<NoteList></NoteList>
<Editor></Editor>
</div>
</template>
<script>
import Toolbar from './components/Toolbar.vue'
import Editor from './components/Editor.vue'
import NoteList from './components/NoteList.vue'
import './assets/css/reset.css'
export default {
name: 'app',
store, //向根组件注入store，这样所有的子组件都能够调用store
components: {
Toolbar,
NoteList,
Editor
}
}
</script>
这是我们的根实例，引用了三个组件Toolbar，NoteList和Editor，这样我们只需要分别对三个组件进行开发就好了。
但是在此之前，我们先思考一下项目的逻辑，我们要完成的功能如下：
- 通过Toolbar的添加，收藏和删除按钮对NoteList中的列表项进行操作
- NoteList上的All和Favorites按钮可以切换显示所有笔记和收藏笔记
- Ediotr上部的title区和NoteList部分笔记显示的题目相同
- Ediotr下部的内容区在切换笔记后不会消失
基于这样的功能，我们先来编写store.js，在src文件夹下新建一个vuex目录，下包含一个store.js文件
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let state = {
notes: [],
activeNote: {}
}
const mutations = {
}
export default new Vuex.Store({
state,
mutations
})
这里就是我们的数据中心，所有的数据操作都由此流入和流出，接下来就是写mutations的相关逻辑，我们先来完成一个添加操作作为例子
// store.js
const mutations = {
ADD_NOTE(state){
const newNote = {
title: 'New Note',
favorite: false,
content: '',
id: new Date()
}
state.notes.push(newNote)
state.activeNote = newNote
}
}
这段代码表示，每次添加笔记时都会向state下的notes数组push一个对象，并且把激活笔记设置为新添加的这个笔记。
接下来是Toolbar的相关逻辑
//Toolbar.vue
<template>
<div id="Toolbar">
<ul class="btnList">
<li @click="addNote" ><i class="iconfont icon-jiahao"></i></li>
<li><i class="iconfont icon-wujiaoxingshixin"></i></li>
<li><i class="iconfont icon-cheng"></i></li>
</ul>
</div>
</template>
<script>
export default {
methods:{
addNote(){
this.$store.commit('ADD_NOTE')
}
}
</script>
我们为添加按钮绑定了一个addNote事件，在每次点击的时候触发，这个事件会向store提交一个触发ADD_NOTE这个mutation的请求，这样就向state下的notes新添加了一个对象。接下来我们需要让这个笔记显示出来。
//NoteList.vue
<template>
<div id="NoteList">
<div class="header-wrapper">
<h3 class="header">NOTES</h3>
<div class="btn-wrapper">
<a href="#">All Notes</a>
<a href="#">Favorites</a>
</div>
</div>
<ul class="list">
<li v-for="note in noteList">
{{ note.title }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'NodeList',
computed: {
noteList(){
return this.$store.state.notes
}
}
</script>
我们在这里先使用计算属性取得state下的notes数组，再对这个数据进行遍历，就能显示所有新建的笔记。接下来来看Editor中对标题和内容的处理
//Editor.vue
<template>
<div id="Editor">
<input type="text" id="EditorTitle" placeholder="请输入笔记标题"
:value="activeNoteTitle" @input="updateTitle">
<textarea name="editor" id="editorPanel"
@input="updateContent" :value="activeNoteText">
</textarea>
</div>
</template>
<script>
export default {
name:'Editor',
computed:{
activeNoteText(){
return this.$store.state.activeNote.content
},
activeNoteTitle(){
return this.$store.state.activeNote.title
}
},
methods:{
updateContent(e){
console.log(this.activeNoteText)
this.$store.commit("EDIT_NOTE", e.target.value)
},
updateTitle(e){
this.$store.commit("EDIT_TITLE",e.target.value)
}
}
}
我们分别对两块输入区域都绑定了input事件，在每次输入的时候都会触发相应事件，让mutation进行响应的操作。重点是使用了：value而不是v-model进行输入框数据的操作，这是由于vuex本身的设计不建议使用双向绑定，在严格模式下使用v-model会报错。
依据以上的例子，大致就可以完成整个app了，其余的只是一些逻辑的处理，接下来我们来完成本地存储的功能。我们希望每次刷新页面数据都能保存到本地而不是全部清空，这样就要用到localStorage，它有如下的基本用法
window.localStorage.setItem('name',data) //保存数据，放在name键下
window.localStorage.getItem('name') // 取出name键的数据
window.localStorage.removeItem('name') //删除name字段的数据
接下来需要思考的是，我们改在什么时候存取数据呢？每次数据更新都保存显得有点傻，我决定在页面刷新之前来保存数据，在页面创建后就获取数据。所以进行如下处理
//Appd.vue
<script>
...
created(){
window.onbeforeunload = ()=>{
this.$store.commit('SAVE_DATA')
}
this.$store.commit('INIT_DATA')
}
...
</script>
//store.js
...
const mutations = {
...
INIT_DATA(state){
if (window.localStorage.getItem('vue-note')) {
this.state = window.localStorage.getItem('vue-note')
}
},
SAVE_DATA(state){
window.localStorage.setItem('vue-note', JSON.stringify(state))
}
}
...
这样就实现了在页面刷新前保存数据，在页面载入后读取数据，看起来很美好，但是实际操作后发现问题。
虽然我们重写了state为保存的数据，但是视图并没有更新，这是为什么？四处寻找后终于找到了答案，就在vue的文档中
深入响应式原理
简单来讲就是，vue不能检测到对象属性的添加与删除，也不允许在已经创建的实例上动态添加新的根级响应式属性。如果需要修改以及实例化的属性，需要使用vue.set()方法。所以我们对store.js进行如下的修改
//store.js
INIT_DATA(state){
if (window.localStorage.getItem('vue-note')) {
const oldState = JSON.parse(window.localStorage.getItem('vue-note'))
Vue.set(state, 'notes', oldState.notes)
Vue.set(state, 'activeNote', oldState.activeNote)
}
},
SAVE_DATA(state){
window.localStorage.setItem('vue-note', JSON.stringify(state))
}
这样，就完美实现了本地存储功能。
网友评论