Vue2.0 探索之路——vuex入門教程和思考

Vuex是什麼

首先對於vuex是什麼，我先引用下官方的解釋。

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

就個人直觀理解 vuex相似於維護了一個全局的 Map對象。你能夠往裏存放 key-value。而後全部的state數據操做都方法化，保證操做的可追蹤和數據的乾淨。

Vuex應用場景

其實對於vuex的應用場景一開始我有點誤區，由於我把它當作了一個從始至終相似於 localstorage的存在。後來發現一刷新頁面，vuex中的state存放的數據會丟失。由於它只是在當前頁面初始化生成的一個實例，你一刷新頁面全部數據從新生成，數據就沒了。

因此，vuex只能用於單個頁面中不一樣組件（例如兄弟組件）的數據流通。

想必你們在想項目中啥狀況會用到vuex吧。
官方是說到了時間你天然知道啥時候用了，由於小項目加入vuex，代碼成本比較高，你得寫各類action，mutation，dispatch交互。你自個兒都會噁心掉。

只有項目大了，組件多了，你須要一個狀態機來解決同一個頁面內不一樣組件之間的數據交流。
就好比說我下面例子中的 todolist中，todo輸入框是一個組件，todolist展現框也是一個組件，他們同屬於一個頁面，你用傳統的 event bus是很不方便的解決這個問題的。

還有就是子組件想改變父組件的狀況下，就好比咱們最近作的一個項目裏的動態表單，其中一個是作了彈出框選擇職業類，選完還得回填到父組件，之前的方式，你可能須要寫不少的event bus去攔截事件，如今你能夠用vuex去很清晰的解決這個問題，修改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://chanming.cc/dist/vuex/...

寫在最後

本文只是一個簡單的入門使用，

走過路過的朋友，若是對你有幫助的話不妨點個收藏或者推薦再走哈，那將是對我最大的鼓勵，謝謝啦。