<ins id="6k1m6"><video id="6k1m6"></video></ins>

    <ruby id="6k1m6"><option id="6k1m6"></option></ruby>
    <code id="6k1m6"><option id="6k1m6"></option></code>
  1. <output id="6k1m6"></output>
    400-650-7353
    您所在的位置:首頁(yè) > IT干貨資料 > web前端 > 【W(wǎng)eb前端基礎知識】Vuex狀態(tài)管理

    【W(wǎng)eb前端基礎知識】Vuex狀態(tài)管理

    一、Vuex是什么

      Vuex是專(zhuān)門(mén)為Vuejs應用程序設計的狀態(tài)管理工具。它采用集中式存儲管理應用的所有組件的狀態(tài),并以相應的規則保證狀態(tài)以一種可預測的方式發(fā)生變化。是狀態(tài)管理,在main.js引入store,注入。只用來(lái)讀取的狀態(tài)集中放在store中; 改變狀態(tài)的方式是提交mutations,這是個(gè)同步的事物; 異步邏輯應該封裝在action中。Vuex可以理解為一種開(kāi)發(fā)模式或框架,通過(guò)狀態(tài)集中管理驅動(dòng)組件的變化,應用級的狀態(tài)集中放在store中,改變狀態(tài)的方式是提交mutations,異步邏輯封裝在action中。

    應用場(chǎng)景有:?jiǎn)雾?yè)應用中,組件之間的狀態(tài)、音樂(lè )播放、登錄狀態(tài)、加入購物車(chē)vuex是一種集中式狀態(tài)管理模式,它按照一定的規則管理狀態(tài),保證狀態(tài)的變化是可預測的。

    1、Vuex的構成

      由上圖,我們可以看出Vuex有以下幾個(gè)部分構成:

    1)state

    state是存儲的單一狀態(tài),是存儲的基本數據。

    2)Getters

    getters是store的計算屬性,對state的加工,是派生出來(lái)的數據。就像computed計算屬性一樣,getter返回的值會(huì )根據它的依賴(lài)被緩存起來(lái),且只有當它的依賴(lài)值發(fā)生改變才會(huì )被重新計算。

    3)Mutations

    mutations提交更改數據,使用store.commit方法更改state存儲的狀態(tài)。(mutations同步函數)

    4)Actions

    actions像一個(gè)裝飾器,提交mutation,而不是直接變更狀態(tài)。(actions可以包含任何異步操作)

    5)Module

    Module是store分割的模塊,每個(gè)模塊擁有自己的state、getters、mutations、actions。

    1. const moduleA = { 
    2.   state: { ... }, 
    3.   mutations: { ... }, 
    4.   actions: { ... }, 
    5.   getters: { ... } 
    6.  
    7. const moduleB = { 
    8.   state: { ... }, 
    9.   mutations: { ... }, 
    10.   actions: { ... } 
    11.  
    12. const store = new Vuex.Store({ 
    13.   modules: { 
    14.     a: moduleA, 
    15.     b: moduleB 
    16.   } 
    17. }) 
    18.  
    19. store.state.a // -> moduleA 的狀態(tài) 
    20. store.state.b // -> moduleB 的狀態(tài) 

    6)輔助函數

    Vuex提供了mapState、MapGetters、MapActions、mapMutations等輔助函數給開(kāi)發(fā)在vm中處理store。

    二、Vuex的設計思想

      Vuex的設計思想,借鑒了Flux、Redux,將數據存放到全局的store,再將store掛載到每個(gè)vue實(shí)例組件中,利用Vue.js的細粒度數據響應機制來(lái)進(jìn)行高效的狀態(tài)更新。

    小結

      Vuex是通過(guò)全局注入store對象,來(lái)實(shí)現組件間的狀態(tài)共享。在大型復雜的項目中(多級組件嵌套),需要實(shí)現一個(gè)組件更改某個(gè)數據,多個(gè)組件自動(dòng)獲取更改后的數據進(jìn)行業(yè)務(wù)邏輯處理,這時(shí)候使用vuex比較合適。假如只是多個(gè)組件間傳遞數據,使用vuex未免有點(diǎn)大材小用,其實(shí)只用使用組件間常用的通信方法即可。

    Vue組件簡(jiǎn)單常用的通信方式有以下幾種:

    1、父子通信:

    父向子傳值,通過(guò)props;子向父傳值通過(guò)events ($emit);父調用子方法通過(guò)ref;provide / inject。

    2、兄弟通信:bus

    3、跨級嵌套通信:bus;provide / inject等。

    Vuex可以理解為一種開(kāi)發(fā)模式或框架,通過(guò)狀態(tài)集中管理驅動(dòng)組件的變化,應用級的狀態(tài)集中放在store中,改變狀態(tài)的方式是提交mutations,異步邏輯封裝在action中。

    文章“【W(wǎng)eb前端基礎知識】Vuex狀態(tài)管理”已幫助

    >>本文地址:http://www.littlerockbway.com/zhuanye/2021/69830.html

    THE END  

    聲明:本站稿件版權均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉載。

    1 您的年齡

    2 您的學(xué)歷

    3 您更想做哪個(gè)方向的工作?

    獲取測試結果
    • 大前端大前端
    • 大數據大數據
    • 互聯(lián)網(wǎng)營(yíng)銷(xiāo)互聯(lián)網(wǎng)營(yíng)銷(xiāo)
    • JavaJava
    • Linux云計算Linux
    • Python+人工智能Python
    • 嵌入式物聯(lián)網(wǎng)嵌入式
    • 全域電商運營(yíng)全域電商運營(yíng)
    • 軟件測試軟件測試
    • 室內設計室內設計
    • 平面設計平面設計
    • 電商設計電商設計
    • 網(wǎng)頁(yè)設計網(wǎng)頁(yè)設計
    • 全鏈路UI/UE設計UI設計
    • VR/AR游戲開(kāi)發(fā)VR/AR
    • 網(wǎng)絡(luò )安全網(wǎng)絡(luò )安全
    • 新媒體與短視頻運營(yíng)新媒體
    • 直播帶貨直播帶貨
    • 智能機器人軟件開(kāi)發(fā)智能機器人
     

    快速通道fast track

    近期開(kāi)班時(shí)間TIME

    两个人在线观看免费播放_国产精品天干天干_亚洲婷婷月色婷婷五月小蛇_男人的好小说全文免费阅读