vue - Vuex

来源:https://www.cnblogs.com/heymar/archive/2022/05/10/16255640.html
-Advertisement-
Play Games

今天內容挺多,因為想的是必須在一天內把這個vuex完成,說實話這裡面要記得東西還是蠻多的,主要是分為原生的和簡便方法兩種都是vue官方定義的,只不過看你要用哪種,vuex感覺要是用熟練了不得了,直接可以把vue起飛了,數據到處用,那種起飛的感覺,曾經體驗過,所以這個應該還是可以多練練的。 明天進入v ...


今天內容挺多,因為想的是必須在一天內把這個vuex完成,說實話這裡面要記得東西還是蠻多的,主要是分為原生的和簡便方法兩種都是vue官方定義的,只不過看你要用哪種,vuex感覺要是用熟練了不得了,直接可以把vue起飛了,數據到處用,那種起飛的感覺,曾經體驗過,所以這個應該還是可以多練練的。
明天進入vue2中的最後一個內容了,路由,這也是一個一直耳聞但是從沒有見過的東西。

一.理解vuex

1.vuex是什麼

專門在vue中實現集中式狀態(數據)管理的一個Vue插件,對vue應用中多個組件的共用狀態進行集中式的管理(讀/寫),也是一種組件間通信的方式,且適用於任意組件間的通信

我們以前要實現各個組件間通信,是不是全局事件匯流排,我們以前都是拿來讀這個數據然後對他進行操作,其實沒有考慮到寫去改這個數據,如果要改A裡面的數據,那麼A就要綁定一個自定義事件,接受別個組件發回來的數據,然後在A裡面修改,vuex我個人而言哈還是挺方便的,但卻是看起來這張圖有點複雜了

image-20220510135253666

vuex來實現,他不屬於任何一個組件,就連app都不是,它是插件所以是註冊在入口文件的,vuex是實現任意間數據通信的,他還有一個特點,它是共用數據的,也就是你能直接用你能直接改,那我看到的也是你改之後的結果,最主要他沒有那麼複雜了,都是單線聯繫,雙向綁定

image-20220510135523557

2.求和案例(普通版)

做一個求和的案例

image-20220510142647261

image-20220510142705343

image-20220510142718124

關鍵點一個是要讓我們selection選擇的值能夠成為後面的加減的基數,所以每一個點擊事件函數應該加的的是option裡面的值,還有一個點也是這個select框的問題,當我們點擊後值變為了字元串類型,這裡可以用:單向綁定讓他成為數值型,但是也可以把 v-model專用的三個修飾符用起來,一個number、一個trim、一個lazy(失去焦點在獲取數據)

3.vuex工作原理圖

vuex

要搞懂vuex,就必須把這張圖記下來

vuex是由三個重要部分組成,actions、mutations、state。我們說要把數據交給vuex進行管理其實就是交給state對象進行存儲,它是一個對象,這三個部分其實都是對象,當我們把我們要管理的數據放到state裡面後,就把視線看到vc實例這裡,我們把數據交給vuex了,但是這個時候我們的vc要開始事件了,這個時候沒有數據因為你把數據給到vuex了,想要拿到數據就得遵守它的規則。

先在組件處調用api(dispatch)兩個參數,一個是你的函數名和你要傳進去的值,這個時候就把函數和值給到actons來了,這裡面同樣要配置,在actions裡面的函數又有兩個參數,第一個參數context,迷你版store,發起commit請求,提交到mutations,他的參數state和value,你要對值做什麼操作,就可以在這裡加工了,然後state裡面你保存的值就發生變化了,隨後就會重新解析模板,你的值就到頁面了。

我們的actions,可能你會覺得有點多餘,因為就是一個提交的功能,可以看到它上面有一個api,這是api伺服器的意思,如果當我們傳進來的值不確定需要ajax拿伺服器過來的值,這個時候就要用到actions了,只能在這裡發起請求。當然如果你實在沒有ajax請求,也沒有一些業務邏輯,其實可以省略這一步的,後面也會說。

然後就是devtools,這是vuex的開發者工具。

其實還有一個store的api,他負責管理這三個部分,包括我們的dispatch、commit等api都是他的,所以所有的前提都是要先配置好store

二.vuex核心概念及api

1.搭建vuex開發環境

首先安裝並註冊,vue2要用vuex3版本,vue3要用vuex4版本

image-20220510151208196

這個時候就要去創建vuex核心內容,vuex,官方推薦的是在src下麵創建一個目錄store裡面放一個index.js這個js文件就是我們的store,並且在裡面要定義好我們vuex的核心中的核心,也就是三個過程

image-20220510152141170

這個時候創建好store之後就可以去入口文件導入了,然後每個vc、vm實例上就應該都有一個$store的api了,如果是這樣你會發現報錯,讓你要先use註冊再導入store,但是你會發現把import這句放到use下麵還是會報錯

image-20220510152918327

其實歸根結底還是因為腳手架對於import和普通語句的劃分,對於import不管你放在多下麵,到時候解析都會先把所有import提升到最上面之後,再按順序去執行每一行代碼

image-20220510152651472

所以這裡應該這麼做,將我們的use註冊放到store這個js文件裡面,同時導入vue,再去入口文件寫上我們的store

image-20220510153449312

image-20220510153505234

2.求和案例(vuex版)

一定要結合者那張圖去理解

給我們的數據丟進state裡面

image-20220510160412295

  • 然後可以開始我們那張vuex流程圖的步驟來了,首先是vc這裡觸發,調用dispatch這個api將我們的函數和要傳進去的參數值發進去

    image-20220510160717450

  • 這邊既然傳進去了,那我們action這個對象裡面也要有這個函數才行,所以要去定義在 action這個對象裡面定義的函數,會受到兩個值,第一個值相當於迷你版store裡面有commit、dispatch等方法,第二個值就是我們傳進來參數,直接commit給mutation去處理,這裡我們給mutation的函數可以跟這裡的一樣,但是為了做一個區分一般改成全大寫

    image-20220510161203930

  • 在我們mutation處理對象這裡也會收到兩個參數,第一個是我們state對象,第二個是我們傳進來的值,所以要怎麼處理,操作的邏輯一般都寫在這裡了

    image-20220510161447305

  • 然後就是我們要怎麼在頁面中呈現出來這個值,vc身上已經有一個$store了,在這個store裡面有一個state,裡面有我們的x的值

    image-20220510162212668

  • 剩下的其他邏輯同理即可

    image-20220510162649340

  • 完善點一

    之前說過可以把一些業務邏輯或者ajax請求放在action裡面,所以這裡奇數加和定時器加可以轉移位置

image-20220510163222102

  • 完善點二

    還說過如果沒有業務邏輯或者ajax請求,dispatch進入action這一步稍顯多餘,可以直接進入mutations,直接在dispatch這裡commit

    image-20220510163538909

3.vuex開發者工具

需要註意的是之前一直用的最新版本6.14,這個版本屬實不知道怎麼用,可能只拿來支持vue3.0的,其實在谷歌商店下載對應的5.x版本就可以了

base state使我們初始化的數據放在state裡面的值,然後點一次就會執行一次mutations裡面的操作,所以看剛纔的原理圖,devtools也是檢測的mutations,然後我們mutations有三個按鈕,從左往右依次為,第一個是將他和之前的一起融合計算最終值就是我們的base state基礎值,第二個是刪除這次操作,數據會回到這次之前的狀態,第三個是直接回到這次的時候數據也是這時候的,但是不會被刪除下麵的這些節點

image-20220510171646414

上面三個是全部算為基礎值,第二個是清空,第三個是不檢測了

image-20220510172144772

在最右邊有導出和導入,當你想要把你的操作給別人看看問題出現在哪裡的時候,你可以到處,直接在粘貼板了,然後他可以點擊導入,直接複製進來

image-20220510172237516

4.context

我們可以看到那個迷你版store有這麼多方法分別都是幹嘛的

image-20220510172730637

第一個commit就不用說了繼續往下走的,第二個dispatch是為了怕我們在這裡的業務邏輯過多寫不完,為了能夠靈活處理,可以在這dispatch,然後就在actions再寫一個你dispatch的函數

image-20220510173204200

然後是我們的state這個對象,有些時候這裡寫邏輯需要用到存進去的這個值,其實在這裡寫mutations要做的的事情確實可以,但是最好按照標準來,因為你如果在這裡寫,開發者工具就失效了

5.getters配置項

store全新配置項

當我們想要對數據作進一步的修改同時呈現在另一個地方,要怎麼做?

你可以直接寫在vue語法裡面,但是寫在這裡面的話,如果你要一大堆的演算法那就不符合風格了這裡

image-20220510174159721

你也可以通過計算屬性來寫,但是計算屬性算出來得值只有這個組件能用

所以這個時候就需要getters了

定義在store裡面,定義完了還要通過store暴露出去,一個對象裡面寫函數接受一個參數state,跟computed一樣返回值就是函數的值

image-20220510174805757

取值通過store下麵的getters對象裡面bigNum函數得到

image-20220510175020736

6.mapState和mapGetters

6.1mapstate

像我們原來這樣要寫一大版東西放進vue語法裡面

image-20220510180642537

不太符合vue的風格模板,想要精簡也可以,通過計算屬性

image-20220510180856068

image-20220510180907797

  • 對象寫法:很明顯這是為了引出那個東西,這樣寫也太繁瑣了,vue確實給我們提供了能夠把操作化簡的東西,一個函數裡面傳一個對象以鍵值對的方式給我們要取的名字和我們數據在state中的名字進行組合,不同再寫前面的路徑了,因為本來就是在state裡面去找,它自動生成的就是一個個函數,所以一般是放在計算屬性裡面,而且採用es6語法把對象包著的這些函數打開

    註意導入的時候怎麼導入的

    image-20220510181750248

    image-20220510181757869

    我們對象其實屬性和值都應該是加引號的,只是有些時候屬性可以省略,值如果是這裡可以找到這個變數就可以不加引號

  • 數組寫法:當我們屬性和值一樣的時候,簡寫形式是針對於後面是一個變數不是字元串的時候,這裡不能用簡寫,但是如果真的屬性和值是一樣的那麼這裡可以採取數組寫法來簡寫

    image-20220510182300108

6.2mapGetters

同理

image-20220510182538837

image-20220510182547970

7.mapActions和mapMutations

7.1mapMutations

可以讓我們沒有一些邏輯不經過actions,直接commit這部分的代碼可以簡便一點

image-20220510192033423

導入後,用法跟前面一樣,只不過是寫在methods裡面

image-20220510192433904

image-20220510192415494

然後要註意一下這裡的參數怎麼傳進來,他其實就是幫我創建了像上面addition這樣的函數,只不過我們自己寫,是可以寫參數的,而他這種方法,你沒有寫參數,我們都知道事件函數,不寫參數預設就是e這個事件對象,

image-20220510192616541

所以在我們事件函數這裡插入參數即可

image-20220510192703463

7.2mapActions

這個就是幫我們簡化進入actions這一步,簡化dispatch這一步

image-20220510193019351

8.多組件共用數據

先來一個組件能實現點擊添加按鈕添加在數組裡面

image-20220510202846509

當我們一點擊添加就開始走vuex的流程,這裡也沒有其他的邏輯,所以可以直接commit

image-20220510203518660

然後我要實現數據共用,在我們求和這個組件直接展示

image-20220510203702872

image-20220510203712555

同時在人員組件展示求和的結果

image-20220510203932308

9.vuex模塊化+namespace

寫完這兩個案例下來可以看到我們的store這個js文件已經很混亂了,這還只是兩個簡單的案例,差不多已經分不清誰是誰幹嘛的了

image-20220510205132463

所以說我們最好也給 store也模塊化一下,分個類讓我們能夠更清晰一點,就目前來說,我們做了一個求和案例,一個人員管理案例,所以大體上可以分為兩類,像這樣創建兩個對象,每一個模塊都有自己的state、mutations、actions等

image-20220510205651291

然後導出的時候你可以自己取名,也可以使用簡化模式

image-20220510210121520

  • computed 經過我們這樣一模塊化,那麼我們的state裡面就沒有剛纔看到的那麼直接的數據了,現在的$store的state裡面就只有這兩個對象了,而對象裡面才是state裡面的數據,所以我們要這樣使用map了,這裡為什麼能簡寫,因為state裡面就是這個我們取的名字也是這個

image-20220510210841901

同時還要將我們標簽上的改過來

image-20220510210939509

那有沒有簡便方法,因為畢竟這麼寫,不太符合vue的規則,說了vue語法裡面要簡潔,是有的。

將我們這個對象名放在前面來,後面用我們原來的形式寫,這樣就可以在標簽上寫的時候直接寫我們在store文件裡面定義的名字

image-20220510211224548

但是這樣寫必須有個前提,就是我們store文件模塊化裡面必須添加一個配置項

image-20220510211336243

  • methods,我們的actions和mutations這兩個節點同時也要改

    image-20220510211923712

以上都是簡便方法模塊化怎麼來寫,下麵說一下原來的純手寫怎麼來導入我們的模塊化

  • 首先是獲取數據,因為state下麵不是我們直接的數據了,所以在前面添加模塊的名字

    image-20220510212935584

  • 然後要去修改值,在以前的基礎上

    image-20220510213101453

  • getters的修改

    image-20220510214337619

    但是getters是對象,對象.的形式不允許出線/符號

    image-20220510214602555

  • 加入要經過actions,有業務邏輯去修改值

    image-20220510214738345

    image-20220510215145700

  • 模塊再模塊

    這才是真正的es6模塊化,分出來作為js文件,導出,然後再index裡面導入

    image-20220510215515895

    image-20220510215525256

  • 最後一條線,就是我們在actions怎麼來發起ajax請求

    image-20220510220006029

    image-20220510220126417


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,非常 ...
  • OpenHarmony電話子系統為 OS 提供了基礎的無線通信能力。支持 TD-LTE/FDD-LTE/TD-SCDMA/WCDMA/EVDO/CDMA1X/GSM 等網路制式的通信模塊,能夠提供高速的無線數據傳輸、互聯網接入等業務,具備語音、簡訊、彩信、SIM 卡等功能。 ...
  • 在直播、語聊房、K 歌房場景中,為增加趣味性和互動性,玩家可以通過變聲來搞怪,通過混響烘托氣氛,通過立體聲使聲音更具立體感。ZegoExpress SDK 提供了多種預設的變聲、混響、混響回聲、立體聲效果,開發者可以靈活設置自己想要的聲音,如果需要試聽,可以啟用耳返進行測試。 ...
  • 在 OpenHarmony 生態發展過程中,涌現了大批優秀的代碼貢獻者,本專題旨在表彰貢獻、分享經驗,文中內容來自嘉賓訪談,不代表 OpenHarmony 工作委員會觀點。 ...
  • 如今,身材管理已成為人們日常生活中重點關註的內容,除了運動之外,熱量的攝入也是重中之重,想要維持理想的身體健康和體重狀態,人們需要長期測量自己每日攝入食物的體量、熱量和營養價值,這需要實踐者有極強的耐心、執行力和知識儲備,從而成為了一部分身材管理道路上的攔路虎。 因此很多運動健康類App中支持食物識 ...
一周排行
    -Advertisement-
    Play Games
  • 概述:這個WPF項目通過XAML繪製汽車動態速度表盤,實現了0-300的速度刻度,包括數字、指針,並通過定時器模擬速度變化,展示了動態效果。詳細實現包括界面設計、刻度繪製、指針角度計算等,通過C#代碼與XAML文件結合完成。 新建 WPF 項目: 在 Visual Studio 中創建一個新的 WP ...
  • 概述:在WPF中使用`WpfAnimatedGif`庫展示GIF動畫,首先確保全裝了該庫。通過XAML設置Image控制項,指定GIF路徑,然後在代碼中使用庫提供的方法實現動畫控制。這簡化了在WPF應用中處理GIF圖的過程,提供了方便的介面來管理動畫播放和暫停。 當使用 WpfAnimatedGif  ...
  • 您是否曾經訪問過一個網站,它需要很長時間載入,最終你敲擊 F5 重新載入頁面。 即使用戶刷新了瀏覽器取消了原始請求,而對於伺服器來說,API也不會知道它正在計算的值將在結束時被丟棄,刷新五次,伺服器將觸發 5 個請求。 為瞭解決這個問題,ASP.NET Core 為 Web 伺服器提供了一種機制,就 ...
  • 本章將和大家分享如何通過 Elasticsearch 實現自動補全查詢功能。 一、自動補全-安裝拼音分詞器 1、自動補全需求說明 當用戶在搜索框輸入字元時,我們應該提示出與該字元有關的搜索項,如圖: 2、使用拼音分詞 要實現根據字母做補全,就必須對文檔按照拼音分詞。在 GitHub 上恰好有 Ela ...
  • using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Windows.Forms; namespace OOP { pub ...
  • 概述:以上內容詳細介紹了在C#中如何從另一個線程更新GUI,包括基礎功能和高級功能。對於WinForms,使用`Control.Invoke`;對於WPF,使用`Dispatcher.Invoke`。高級功能使用`SynchronizationContext`實現線程間通信,確保清晰、可讀性高的代碼 ...
  • Nuget包 Microsoft.Extensions.Telemetry.Abstractions 包含的新的日誌記錄source generator,它支持使用[LogProperties]將整個對象作為State與日誌一起記錄。 我將展示一種方法來控制如何使用[LogProperties]對象 ...
  • 支持.Net/.Net Core/.Net Framework,可以部署在Docker, Windows, Linux, Mac。 常見的ORM技術(比如:Entity Framework,Dapper,SqlSugar,NHibernate,等…),它們不是在做Sql語句的程式化變種,就是在做Sq ...
  • 一、引言 在現代應用程式開發中,尤其是在涉及I/O操作(如網路請求、文件讀寫等)時,非同步編程成為了提高性能和用戶體驗的關鍵技術。C#作為.NET框架下的主流開發語言,提供了強大的非同步編程支持,通過async/await關鍵字,可以讓開發者以同步的方式編寫非同步代碼,極大地簡化了非同步編程的複雜性。本文將 ...
  • 一、引言 在.NET開發中,操作Office文檔(特別是Excel和Word)是一項常見的需求。然而,在伺服器端或無Microsoft Office環境的場景下,直接使用Office Interop可能會面臨挑戰。為瞭解決這個問題,開源庫NPOI應運而生,它提供了無需安裝Office即可創建、讀取和 ...