vuex詳細介紹和使用方法

1.什麼是vuex？

官方的解釋： Vuex是一個專爲Vue.js應用程序開發的狀態管理模式

當項目比較龐大的時候，每一個組件的狀態比較多，爲了方便管理，須要把組件中的狀態抽取出來，放入Vuex中進行統一管理。經常使用的登陸，購物車等一下數據的存儲

 

 

State：惟一的數據源，咱們須要把任何一個組件中須要抽取出來的變量放入到state中去

Getters：經過Getters能夠派生出一些新的狀態

Mutations：更改Vuex的store中的狀態的惟一方法時提交mutation

Actions：Action提交的是mutation，而不是直接變動狀態。Action能夠包含任何的異步操做, 但mutation必須是同步操做。

操做步驟： 當組件中的狀態發生改變，經過dispatch函數提交到Action，Actions再經過Commit函數提交到Mutations, 此時，狀態發生改變都會實時的去渲染組件。

在線文檔：

https://github.com/vuejs/vuex

https://vuex.vuejs.org/zh/

項目中如何使用vuex

在咱們的項目中，安裝vuex

cnpm install vuex --save

在src目錄中，建立store文件，並建立vuex中模塊的文件名，每個都單獨拆分開，便於管理模塊。

而後在你的main.js文件引入

在你的index.js至關於vuex的主目錄，文件都在index.js文件引入

state文件定義全部的狀態，

 

mutation-types用於定義action和mutation變量，便於統一管理，

定義的狀態能夠在瀏覽器看到咱們定義的變量

 

action 提交的是 mutation，而不是直接變動狀態。

 

mutation提交更改state的惟一的狀態

 

 getters派發state的狀態值，經過計算屬性獲取值。在任何一個組件均可以或獲取到你在state存儲的數據信息

 在組件中使用。setUser就是在action定義的提交mutation的放，decode要提交的數據

this.$store.dispatch("setUser", decode);

　　

只要寫好一個，其餘的套路都是同樣的，主要的就是action提交大mutations，而後mutations去更改state裏面的狀態。