Vuex是什么
首先對於 vuex 是什么，我先引用下官方的解釋。
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
就我的直觀理解 vuex 類似於維護了一個全局的 Map對象。你可以往里存放 key-value 。然后所有的state數據操作都方法化，保證操作的可追蹤和數據的干凈。
Vuex應用場景
其實對於vuex的應用場景一開始我有點誤區，因為我把它當做了一個從始至終類似於 localstorage的存在。后來發現一刷新頁面，vuex中的state存放的數據會丟失。因為它只是在當前頁面初始化生成的一個實例，你一刷新頁面所有數據重新生成，數據就沒了。
所以，vuex只能用於單個頁面中不同組件（例如兄弟組件）的數據流通。
Vuex基礎概念
vuex中涉及的概念主要有下面幾點，下面做個簡單的介紹和理解。
Vuex 官方文檔： https://vuex.vuejs.org/zh-cn/
State
vuex的單一狀態樹，使用一個對象就包含了應用層的所有狀態。
我的理解是，state是vuex自己維護的一份狀態數據。數據的格式需要你根據業務去設計喲~~
下面是我簡單設計的todolist的state狀態樹。
Getters
getters屬性主要是對於state中數據的一種過濾，屬於一種加強屬性。比如你在做一個todolist，對於已完成的，你可以寫一個doneTodoList的屬性，在外面直接調用。其實他就是對於action和mutations的一個簡化。不然你寫一個doneTodoList功能，你還得寫對應的action和mutation，費勁啊。
所以，總結一下，一些簡單或通用的操作可以抽取到getters上來，方便在應用中引用。
Actions
action,動作。
對於store中數據的修改操作動作在action中提交。
其實action和mutation類似，但是action提交是mutation，並不直接修改數據，而是觸發mutation修改數據。
Mutations
更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。
mutation中寫有修改數據的邏輯。
另外mutation里只能執行同步操作。
Module
module ,模塊化。
因為隨着后面的業務邏輯的增多，把vuex分模塊的開發會使得代碼更加簡潔清晰明了，比如登錄一個模塊，產品一個模塊，這樣后面改動起來也簡單嘛。
下圖的 todo 目錄就是一個 module ，下面的 actions.js , mutations.js 就和外面的一樣。
代碼實踐
引入vuex依賴
npm install vuex
目錄結構
store.js 將vuex維護的所有數據導出供外部使用。
mutation_type.js 維護操作類型的常量字段
main.js加載
頁面使用
1.讀取store里的值：
this.$store.state.字段名
如果有 moudle 的話，假設叫 login ,那么取值又要變了，加上 module 名
this.$store.state.login.mobile
2.發起操作請求:
this.$store.dispatch('action中的方法名' , '參數') ;
參數你可以隨便傳json
3.getters的用法
this.$store.getters.filterDoned filterDoned 是在 todo 里寫的一個 getters 方法，就這么調用噢
項目Github
寫了一個小demo方便實踐。對vuex不了解的朋友可以看看。純小白寫法，都能看得懂。如果覺得有所幫助可以點個star，感激不盡了~~
Demo 地址： https://github.com/XuXiaoGH/v...
Demo 預覽： http://jyzhd.cc/dist/vuex/ind...