萬字血書Vue—Vuex

来源:https://www.cnblogs.com/gfhcg/archive/2023/03/25/17232495.html
-Advertisement-
Play Games

Vuex概述 組件之間共用數據的方式(小範圍) 全局事件匯流排 Vuex是什麼? 專門在Vue中實現集中式狀態(數據)管理的一個Vue插件,可以方便的實現組件之間的數據共用。 使用Vuex統一管理狀態的好處 能夠在vuex中集中管理共用的數據,易於開發和後期維護 能夠高效地實現組件之間的數據共用,提高 ...


Vuex概述

組件之間共用數據的方式(小範圍)

全局事件匯流排

image

Vuex是什麼?

專門在Vue中實現集中式狀態(數據)管理的一個Vue插件,可以方便的實現組件之間的數據共用。

image

使用Vuex統一管理狀態的好處
  • 能夠在vuex中集中管理共用的數據,易於開發和後期維護
  • 能夠高效地實現組件之間的數據共用,提高開發效率
  • 存儲在vuex中的數據都是響應式的,能夠實施保持數據與頁面的同步
什麼時候用Vuex?
  • 多個組件依賴同一狀態。
  • 來自不同的組件的行為需要變更同一狀態。

Vuex工作原理

image

  • Actions
  • Mutations
  • State(data)object

image

Vuex的基本使用

Vue2——Vuex3

Vue3——Vuex4

  • 安裝vuex依賴包
npm i vuex --save
  • 在入口文件main.js,引入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
  • 創建store對象
const store= new Vuex.store({
    //state中存放的就是全局共用的數據
    state:{count: 0}
})

將store對象掛載到vue實例中

new Vue({
    el:'#app',
    render:h=>h(app),
    router,
    //將創建的共用數據對象,掛載到vue實例中
    store
})

Vuex的核心概念

store有四個配置項寫到/strore/indx.js

組件中讀取Vuex的數據:$store.state.sum

組件中修改Vuex的數據:$store.dispatch('action中的方法名',數據)$store.commit('mutation中的方法名',數據)

State

State提供唯一的公共數據源,所有的共用數據都要統一放到Store的state中存儲

const store= new Vuex.store({
    //state中存放的就是全局共用的數據
    state:{count: 0}
})
//組件訪問state中數據的第一種方式:
this.$store.state.全局數據名稱 //template中this可以省略

//組件訪問state中數據的第二種方式:(復用性高)
//1、從vuex中按需導入mapState函數
import { mapState} from 'vuex'

//2、將全局數據,映射為當前組件的計算屬性
computed:{
    //對象寫法
    ...mapState({jishu:'count'})//屬性名:jishu、方法名:count
    //數組寫法(適用於計算屬性名和方法名相同的情況)
    ...mapState(['count'])
}
Mutation

千萬不要通過組件直接修改元數據!!!

Mutation用於變更Store中的數據

  • 只能通過mutation變更Store數據,不能直接操作Store中的數據
  • 通過這種方式雖然操作起來繁瑣,但是可以集中監控所有數據的變化
const store= new Vuex.store({
    //state中存放的就是全局共用的數據
    state:{count: 0},
    mutations:{
        add(state){
            state.count++
        }
    }
    
})

觸發mutation

//方法一
this.$store.commit('函數名',參數)
//方法二
//1、從vuex中按需導入mapMutations函數
import { mapMutations} from 'vuex'

//2、將mutations函數,映射為當前組件的methods方法
methods:{
    //藉助mapMutations生成對應的方法,方法中會調用commit去聯繫mutations
    ...mapMutations(['add','addN'])
}

觸發mutation時傳遞參數

const store= new Vuex.store({
    //state中存放的就是全局共用的數據
    state:{count: 0},
    mutations:{
        add(state,step){
            state.count+=step
        }
    }
    
})

不要在mutations函數中執行非同步操作!!!

Action

Action專門用於處理非同步任務,不能使用Mutation但是在Action中還是要通過觸發Mutation的方式間接變更數據,若沒有網路請求或其他業務邏輯,組件也可以越過actions,即不寫dispatch,直接編寫commit

const store= new Vuex.store({
    //state中存放的就是全局共用的數據
    state:{count: 0},
    mutations:{
        add(state){
            state.count++
        },
        actions:{
            addAsync(context){
                seTimeout(()=>{
                    context.commit('add')
                },1000)
            }
        }
    }
    
})

觸發Action

methods:{
handle(){
 //觸發actions的第一種方式
 this.$store.dispatch('addAsync')
}
}

 //觸發actions的第二種方式
1、從vuex中按需導入mapActions函數
import { mapActions} from 'vuex'

2、將actions函數,映射為當前組件的methods方法
methods:{
    ...mapActions(['addAsync'])
}

觸發Action攜帶參數

const store= new Vuex.store({
    //state中存放的就是全局共用的數據
    state:{count: 0},
    mutations:{
        add(state,step){
            state.count+=step
        },
        actions:{
          addAsync(context,step){
               seTimeout(()=>{
                    context.commit('add',step)
                },1000)
            }
        }
    }
})

methods:{
handle(){
 this.$store.dispatch('addAsync',5)
}
}
Getter
  • Getter用於對Store中的數據進行加工處理形成新的數據,類似於Vue的計算屬性
  • Store中數據的發生變化,Getter的數據也會跟著變化
const getters={
	bigSum(state){
		retutn state.sum*10;
	}
}

export default new Vuex.Store({
    ......
    getters
})
//組件訪問Getter的第一種方式:
this.$store.getters.名稱 
//組件訪問Getter的第二種方式:(復用性高)
1、從vuex中按需導入mapGetters函數
import { mapGetters} from 'vuex'

2、將全局數據,映射為當前組件的計算屬性
computed:{
    ...mapGetters(['count'])
}

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

-Advertisement-
Play Games
更多相關文章
  • TIDB簡介 什麼是TIDB TiDB 是一個分散式 NewSQL 資料庫。它支持水平彈性擴展、ACID 事務、標準 SQL、MySQL 語法和 MySQL 協議,具有數據強一致的高可用特性,是一個不僅適合 OLTP 場景還適合 OLAP 場景的混合資料庫。 TiDB 是 PingCAP 公司自主設 ...
  • 在前面的設計和實現中,我們的微服務開發平臺通過JustAuth來實現第三方授權登錄,通過集成公共組件,著實減少了很多工作量,大多數的第三方登錄直接通過配置就可以實現。而在第三方授權登錄中,微信小程式授權登錄和APP微信授權登錄是兩種特殊的第三方授權登錄。 JustAuth之所以能夠將多種第三方授權登 ...
  • 使用 Linux dd 命令測試磁碟讀寫性能 從幫助手冊中可以看出,dd命令可以複製文件,根據操作數進行轉換和格式化。我這裡記錄一下dd命令用於測試磁碟I/O性能的過程。 dd 可從標準輸入或文件中讀取數據,根據指定的格式來轉換數據,再輸出到文件、設備或標準輸出。 dd 命令用法: Usage: d ...
  • Linux報錯:audit: backlog limit exceeded(審計:超出積壓限制) 系統版本:CentOS Linux release 7.6.1810 (Core) 問題現象:一次巡檢中發現業務系統打不開,對應的Linux伺服器ssh連接不上,但是能ping通,於是在VMware v ...
  • P2 MySQL三層結構 所謂安裝MySQL資料庫,就是在主機安裝一個資料庫管理系統(DBMS),這個管理程式可以管理多個資料庫。DBMS(database manage system) 一個資料庫可以創建多個表,以保存數據(信息)。 數據管理系統(DBMS)、資料庫和表的關係如圖所示: 數據在數據 ...
  • 支持insert和批量insert,待研究怎麼設置 一、建表 (1)預設表名為usertable CREATE TABLE usertable ( YCSB_KEY VARCHAR(255) PRIMARY KEY, FIELD0 TEXT, FIELD1 TEXT, FIELD2 TEXT, FI ...
  • 一、工具介紹 YCSB 於 2010 年開源,YCSB是雅虎開源的NoSQL測試工具,用java開發實現,通常用來對noSQL資料庫進行性能,註意此工具僅支持varchar和text類型,且列的長度可以增加,預設是10列,可以根據自己的需要增加列長。運行一個壓力測試需要 6 步: 配置需要測試的數據 ...
  • 一、JDK(Java Development Kit)安裝 版本: 資源:下載官網的資源需要登錄帳號,可以在網上自己去找資源。jdk8 下載地址 1、打開jdk安裝軟體,進入Java SE 安裝界面。 2、點擊下一步。 3、點擊下一步,進入安裝界面。安裝完成後進入Java安裝界面。 4、點擊下一步, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...