關於vuex，前端必會

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

簡單來說 vuex 就是把需要共享的變數全部儲存在乙個物件裡面，然後將這個物件放在頂層元件中供其他元件使用，它是另一種意義上的變數提公升。

也就是說vuex是把vue專案中的公用的資料放在一塊供所有元件使用，起到管理全域性變數的作用。

vuex存在5個屬性：

流程圖中可以看出vuex是單項資料流，當我們在元件中想要操作vuex中state存放的資料，不支援直接對state資料進行操作，而是通過提交（commit）mutations中的方法對state存放的資料進行操作。然後state中的資料經過修改後再渲染到元件中。

具體用法：

mutations使用方法：

import vue from
'vue'
import vuex from
'vuex'
vue.
use(vuex)
const store =
newvuex.store(,
mutations:
edit
(state)}}
)export
default store

在vue元件中呼叫：

this
.$store.
commit
('edit'
)

mutation傳引數

this
.$store.
commit
('edit',15
)

接收引數

edit
(state,age)

actions使用方法：

元件中通過派發（dispatch）actions中的方法呼叫mutation中的函式對state進行操作。

actions:
,2000)}
}

在元件中呼叫：

this
.$store.
dispatch
('aedit'
,)

getters：可以對state中的成員加工後傳遞給外界

這個屬性相當於乙個加工廠，將state中資料進行處理加工，然後就可以呼叫處理好的資料讓元件去使用

getters:
,fullinfo
(state,getters)
}

元件中呼叫

this

.$store.getters.fullinfo

剩下的models就不介紹了，不是用太多

專案中使用vuex給我們帶來了很大的方便。

在使用vuex的專案中，我們重新整理頁面（或者f5重新整理）專案中往往會出現bug，一般都是獲取vuex中的satate資料為null。也就是說重新整理頁面會重置vuex中的內容，在元件重新渲染資料時找不到重新整理前的資料了。

個人觀點，如果想保持資料重新整理頁面還存在，可以使用localstorage儲存，不過要注意陣列大小。而vuex用作兄弟元件之間相互使用資料比較好。

okkkkkk，歡迎交流指點。