vuex詳細介紹和使用方法

小周sri的碼農發表於2019-01-24

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裡面的狀態。

 

相關文章