vue.js
vue.js是一套易用，靈活，高效的漸進式javascript框架，只需要引入vue.js即可使用vue提供的虛擬dom與雙向數據綁定等基礎用法
與react.js相同， 屬于輕量級視圖層框架，即等于僅著重于MV*中的V
vuex
vue中主要以高度組件化為主，父子組件間，非父子組件間的數據交互實際上可以使用props或vuebus來及解決，但若是想要構建中大型應用的話，必定會極為繁瑣，所以vue推出了單例狀態(tài)管理的vuex來解決這類問題
起步于flux，redux，用于管理vue組件間的數據狀態(tài)，實際上與前兩者的核心是相同的，都是通過構建一個無狀態(tài)的store對象用于保存數據結構（雖然是僅保存數據結構，但是需要注意的是，store必須保存應用中所有的狀態(tài)，這樣才能真正實現單一狀態(tài)源管理模式）
而當保存應用數據的store需要修改狀態(tài)時，則使用mutations來修改store中的狀態(tài)，vuex提供了兩種方式用于修改store的狀態(tài)，一種是通過同步的方式mutations，另一種則是采用異步的方式action，兩種方式看似應用的場景不同，實際上兩者是相當于redux中的reducer與action
在實際數據操作中，只要是涉及異步操作（如獲取后臺數據等）則調用相應的action，而在action中調用（commit）相應的mutations即可
至于mutations一方面提供方法給action中調用，另一方面，當應用并不需要使用異步操作時，則可以直接調用mutations修改store
為什么要使用vuex
一方面高度組件化的vue在復雜應用中，組件間的數據傳遞十分繁瑣，大量的props與vuebus會影響可擴展性與可閱讀性，所以提供一種將應用中所有數據保存起來并且統(tǒng)一操作的狀態(tài)管理方式是解決此類問題的好方法之一
需要注意的是，vuex是針對于組件間有著大量數據交互，牽扯的應用中才能更為簡便，對于簡單應用，甚至是普通的html文件而言則是毫無意義甚至是造成額外負荷
使用vuex有一個極大的好處便是它的函數式編程，采用函數式編程使得整個應用處于一種高度可預測的狀態(tài)中，不僅可以高度調配自身狀態(tài)，并且可以高度掌握到應用狀態(tài)的變化
在每一次的應用狀態(tài)（store）發(fā)生改變時，都能可通過調用的mutations進行回溯，保證應用穩(wěn)定性，安全性，即redux中的時間旅行
開始搭建
現在開始搭建一個基于vue+vuex的簡單記事本單頁應用，該應用采用node.js+mongodb作為后臺
應用基本結構
該應用使用vue提供的官方腳手架vue-cli，當然不使用該腳手架也問題不大
官方提供的腳手架實際上已經包含了開發(fā)階段所需要的大部分模塊，只需要稍微添加些許自己的代碼即可完成該應用
后臺與數據庫的搭建不一定要使用node.js+mongodb，因為vue本身僅包含view層，所以采用php或是java等并不會影響應用功能
創(chuàng)建store（倉庫）
store僅包含應用的數據結構，在該應用中只需要有當前編輯文本與文本列表即可
const state = {
textlist: [],
nowtext: {
text: '',
id: 0
}
}
mutations
mutations提供的是用于修改store中的狀態(tài)而已，更為簡單
getText (state, textlist) {
state.textlist = textlist
},
nowText (state, text) {
state.nowtext = text
console.log(state)
}
actions
actions主要提供異步操作的可能，這里是一個采用vue-resource的方式請求后臺接口并返回調用（commit）相應的mutations來修改狀態(tài)即可
getTestListAtion ({commit}) {
Vue.http.post('/v1/vuex/gettextlist').then(function (Response) {
return Response.json()
}).then(function (Response) {
console.log(Response)
commit('getText', Response.data.list)
})
},
vue組件搭建
這里主要構建了兩個組件，筆記列表與編輯筆記，編輯筆記與新建筆記實際上是相同頁面，通過判斷相應的條件來區(qū)分即可，這里使用的是筆記id來判斷
我們需要引入相應的store，mutations和actions到組件中，vuex為我們提供了一些映射的方法，十分高效簡潔
mapMutations：批量映射mutations
mapActions：批量映射actions
mapState：批量映射state
通過這三個方法，可以將之前創(chuàng)建的vuex所提供的狀態(tài)放入到對應的組件中，實現狀態(tài)管理
vue路由控制
官方文檔十分簡潔扼要，大部分所需要的方法都封裝的很好，直接查閱即可
總結
創(chuàng)建store保存數據，mutations修改狀態(tài)，actions異步操作，vuex狀態(tài)管理的基本便完成，此后將vuex引入到相應的組件中，即可享受來自vuex的高度管理與高度可預測的良好方式
