Vuex是什麼

首先對於 vuex 是什麼，我先引用下官方的解釋。http://www.tuicool.com/articles/VviqEzM

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

就我的直觀理解 vuex 類似於維護了一個全域性的 Map物件。你可以往裡存放 key-value 。然後所有的state資料操作都方法化，保證操作的可追蹤和資料的乾淨。

Vuex應用場景

其實對於vuex的應用場景一開始我有點誤區，因為我把它當做了一個從始至終類似於 localstorage的存在。後來發現一重新整理頁面，vuex中的state存放的資料會丟失。因為它只是在當前頁面初始化生成的一個例項，你一重新整理頁面所有資料重新生成，資料就沒了。

所以，vuex只能用於單個頁面中不同元件（例如兄弟元件）的資料流通。

Vuex基礎概念

vuex中涉及的概念主要有下面幾點，下面做個簡單的介紹和理解。

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裡的值：

如果有 moudle 的話，假設叫 login ,那麼取值又要變了，加上 module 名

2.發起操作請求:

this.$store.dispatch('action中的方法名' , '引數') ;

引數你可以隨便傳json

3.getters的用法

this.$store.getters.filterDoned 
filterDoned 是在 todo 裡寫的一個 getters 方法，就這麼呼叫噢

專案Github

寫了一個小demo方便實踐。對vuex不瞭解的朋友可以看看。純小白寫法，都能看得懂。如果覺得有所幫助可以點個star，感激不盡了~~

寫在最後

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

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