講了這麼久，終於講到重點了。將vuex用進我們的筆記應用專案

首先建立一個資料夾用來放vuex吧

按照那篇博文的寫法，一個store.js 和 actions.js

再想一下一個筆記應用需要哪些資料呢？
1、筆記資料
2、以及當前活動的筆記資料（即正在編輯的筆記）

好像就只有這個資料了吧。

對於筆記也就只有增刪查改，以及設定當前編輯筆記和喜歡的筆記了
這裡是store.js的程式碼，我現在儘量程式碼風格都偏向ES2015風格了，以前其實很排斥寫ES6，覺得現在用的JS挺好的啊，但是一種新技術的出現並不是為了給我們增加工作量，而是為了使得我們的開發更加便捷。因此刻意去學習使用ES2015，反而會減輕我們的開發工作量呢。

Vue.use(Vuex)

/*定義資料*/
const state = {
        notes: [],
        activeNote: {}
    }
    /*定義方法*/
const mutations = {
    // 新增筆記
    ADD_NOTE: state => {
        const newNote = {
            text: 'new note',
            favorite: false,
            header: 'newNote'
        }
        state.notes.push(newNote),
            state.activeNote = newNote
    },
    //
 
編輯筆記
    EDIT_NOTE: (state, text) => {
        state.activeNote.text = text;
    },
    //刪除筆記
    DELETE_NOTE: (state) => {
        state.notes.$remove(state.activeNote);
        state.activeNote = state.notes[0];
    },
    //標記favorite
    TOGGLE_FAVORTE: (state) => {
        state.notes.favorite = !state.activeNote.favorite;
    },
    //
 
設定活動筆記
    SET_ACTIVE_NOTE: (state, note) => {
        state.activeNote = note;
    }

}

const store = new Vuex.Store({
    state,
    mutations
});

這裡的專案沒有用到getters，寫了actions資料分發；
事件分發這裡我不是特別的懂：
有dispatch，有commit

const actions = {
    editNote({
        dispatch
    }, e) {
        dispatch('EDIT_NOTE', e.target.value)
    },
}

commit:

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

這裡的說明是 Action 函式接受一個與 store 例項具有相同方法和屬性的 context 物件，因此你可以呼叫 context.commit 提交一個 mutation，大概是我對於析構函數了解不清楚吧

文件說Action 通過 store.dispatch 方法觸發

所以說如果寫在store裡面，就用commit，寫在外面就用dispatch（僅僅是自己的猜測）
首先就是針對命名的語義化，主要集中在兩個名詞上：commit 與 dispatch。

之前的 store.dispatch 變成了現在的 store.commit，但是 store.dispatch 依然可用，但僅僅用來觸發某些 action。

這裡就懂了actions和getters其實是一樣的道理。
getters可以這樣獲取

computed:{
    count(){
      return this.$store.state.count
    },
    notes(){
      return this.$store.state.notes
    }
  },  

然後actions也可以這麼寫

methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    }
  }

另一種寫法就是先引入mapActions和mapGetters;

import {mapActions,mapGetters} from 'vuex'

在store裡面，store.js

const actions = {
    updateActiveNote: ({
        commit
    }, payload) => {
        commit('SET_ACTIVE_NOTE', payload)
    },
    addNote: ({
        commit
    }) => {
        commit('ADD_NOTE')
    },
    deleteNote: ({
        commit
    }, note) => {
        commit('DELETE_NOTE', note)
    },
    toggleFavorite: ({
        commit
    }) => {
        commit('TOGGLE_FAVORTE')
    }
}

因此函式的引入，app.vue

methods:mapActions(['updateActiveNote'])

不過這裡我遇到了一個問題就是我不知道怎麼傳參了。
然後我還是採用的mutation傳參:

this.$store.commit('SET_ACTIVE_NOTE', note)