<address id="bjr5b"><form id="bjr5b"></form></address>

    <form id="bjr5b"></form>

        <address id="bjr5b"><listing id="bjr5b"><meter id="bjr5b"></meter></listing></address>

          <form id="bjr5b"></form>
          400-650-7353

          精品課程

          您所在的位置:首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】Vuex狀態管理

          【Web前端基礎知識】Vuex狀態管理

          • 來源:
          • 2021-08-30 17:10:05
          • 閱讀()
          • 分享
          • 手機端入口

          一、Vuex是什么

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

          應用場景有:單頁應用中,組件之間的狀態、音樂播放、登錄狀態、加入購物車vuex是一種集中式狀態管理模式,它按照一定的規則管理狀態,保證狀態的變化是可預測的。

          1、Vuex的構成

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

          1)state

          state是存儲的單一狀態,是存儲的基本數據。

          2)Getters

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

          3)Mutations

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

          4)Actions

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

          5)Module

          Module是store分割的模塊,每個模塊擁有自己的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 的狀態 
          20. store.state.b // -> moduleB 的狀態 

          6)輔助函數

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

          二、Vuex的設計思想

            Vuex的設計思想,借鑒了Flux、Redux,將數據存放到全局的store,再將store掛載到每個vue實例組件中,利用Vue.js的細粒度數據響應機制來進行高效的狀態更新。

          小結

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

          Vue組件簡單常用的通信方式有以下幾種:

          1、父子通信:

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

          2、兄弟通信:bus

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

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

          學習疑問申請解答
          您的姓名
          您的電話
          意向課程
           

          中公優就業

          IT小助手

          掃描上方二維碼添加好友,請備注:599,享學習福利。

          >>本文地址:
          注:本站稿件未經許可不得轉載,轉載請保留出處及源文件地址。

          推薦閱讀

          優就業:ujiuye

          關注中公優就業官方微信

          • 關注微信回復關鍵詞“大禮包”,享學習福利
          QQ交流群
          在線疑問解答
          (加群備注“網站”)
          IT培訓交流群 加入群聊 +
          軟件測試 加入群聊 +
          全鏈路UI/UE設計 加入群聊 +
          Python+人工智能 加入群聊 +
          互聯網營銷 加入群聊 +
          Java開發 加入群聊 +
          PHP開發 加入群聊 +
          VR/AR游戲開發 加入群聊 +
          大前端 加入群聊 +
          大數據 加入群聊 +
          Linux云計算 加入群聊 +
          優就業官方微信
          掃碼回復關鍵詞“大禮包”
          享學習福利

          測一測
          你適合學哪門IT技術?

          1 您的年齡

          2 您的學歷

          3 您更想做哪個方向的工作?

          獲取測試結果
           
          課程資料、活動優惠 領取通道
           
           
          国产成人精品亚洲日本语言
          <address id="bjr5b"><form id="bjr5b"></form></address>

            <form id="bjr5b"></form>

                <address id="bjr5b"><listing id="bjr5b"><meter id="bjr5b"></meter></listing></address>

                  <form id="bjr5b"></form>