Vue.js+Vuex：一个简单的记事本

写在前面

最近在学习vue，正好也在掘金看到一篇文章，是作者在学习vue的过程中实现的一个记事本应用。
这个想法真的很棒，因为记事本的功能并不多，逻辑也很简单，是一个学习vue的好例子。
于是我也跟风实现了一下，下面就讲一下我实现的过程和一些收获。

---

UI

先看下UI吧

界面

添加一篇记录

点击一篇记录

添加一篇记录为喜爱

查看喜爱记录

---

使用vue-cli构建项目

这个项目是用脚手架构建的，有了脚手架，根本不需要自己集结所有工具，只需要几行命令就可以拥有足够强大的构建框架。

# 安装vue-cli
npm install -g vue-cli

# 使用vue-cli初始化项目
vue init webpack note

# 进入到目录
cd note

# 安装依赖
npm install

# 开始运行
npm run dev

构建完成后会发现根目录下有个note文件夹，文件结构如下

main.js就是入口文件

---

vuex维护状态

vuex主要的工作原理就是其在全局维护一个store，在store里包含着state、actions、getters、mutations，显然使用一个store维护所以的数据，这样表现层只需要取得状态并显示就好，而修改状态只需要派遣一个事件，action会捕获事件并调用相应的mutations来修改state。

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
    notes: [],
    activeNote: {},
    favorNotes: []
}

const getters = {
    notes: (state) => state.notes,
    activeNote: (state) => state.activeNote,
    favorNotes: (state) => state.favorNotes
}

const actions = {
    add_note({commit}) {
        return commit('ADD_NOTE');
    },
    delete_note({commit}) {
        return commit('DELETE_NOTE');
    },
    add_favor({commit}) {
        return commit('ADD_FAVOR');
    },
    remove_favor({commit}) {
        return commit('REMOVE_FAVOR');
    },
    edit_note({commit}, text) {
        return commit('EDIT_NOTE', text);
    },
    set_activenote({commit}, item) {
        return commit('SET_ACTIVENOTE', item);
    }
}

const mutations = {
    ADD_NOTE(state) {
        //根据id判断是否为同一个note
        const noteid = Math.round(Math.random()*10000);
        const note = {
            id: noteid,
            text: 'New Note, say somthing...',
            favor: false
        }
        state.notes.push(note);
        console.log(state.notes);
    },
    DELETE_NOTE(state) {
        let notes = state.notes;
        for(let key in notes) {
            if(notes[key].id == state.activeNote.id) {
                state.notes.splice(key, 1);
            }
        }
        state.activeNote = state.notes[0];
    },
    ADD_FAVOR(state) {
        state.activeNote.favor = true;
    },
    REMOVE_FAVOR(state) {
        state.activeNote.favor = false;
    },
    EDIT_NOTE(state, text) {
        state.activeNote.text = text;
        for(let i in state.notes) {
            if(i == state.activeNote) {
                i.text = text;
            }
        }
    },
    SET_ACTIVENOTE(state, item) {
        state.activeNote = item;
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

---

App.js

<template>
  <div id="app">
    <tool-bar></tool-bar>
    <note-list></note-list>
    <edit-note></edit-note>
  </div>
</template>

<script>
import EditNote from './components/editNote';
import ToolBar from