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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM