4 vuex的基本使用

2022-09-04 22:45:27 字數 1134 閱讀 6075

1.使用vuex統一管理狀態的好處

1.  能夠在vuex中集中管理共享的資料,易於開發和後期維護

2.  能夠高效地實現元件之間的資料共享,提高開發效率

3.  儲存在vuex中的資料都是響應式的,能夠實時保持資料與頁面的同步

2. vuex的核心概念

1.state提供唯一的公共資料源,所有的資料都要統一放到store的state中進行儲存

訪問state中的資料方式:

2.mutationmutation 用於變更store中的資料 (mutatios中不能寫非同步的**)

1. 只能通過mutation變更store資料,不可以直接操作store中的資料  

2. 通過這種方式操作起來雖然稍顯繁瑣,但是可以集中監控所有資料的變化 

觸發mutation中的方法:

3.action用於處理非同步任務

如果通過非同步變更資料,必須通過action,而不能使用mutation,但是在action中還是要通過觸發mutation的方式間接變更資料

4.getter 用於對store中的資料進行加工處理形成新的資料(getter不會修改原資料,只是包裝資料)

1. getter可以對store中已有的資料進行加工處理之後形成新的資料,類似於vue的計算屬性

2. store中資料發生變化,getter的資料也會跟著變化

VUE專案爬坑 4 vuex使用注意

1 修改資料mutations state中的資料,不能直接修改,如果想要修改,必須通過 mutations 2 獲取資料this.store.state.如果元件想要直接 從 state 上獲取資料 需要 this.store.state.3 this.store.commit 方法的名稱 唯一的...

vuex的基本使用

vuex的特點 1.多元件共享狀態 多個元件使用同乙個資料 2.任何乙個元件發生改變,其他元件也要跟著發生相應的變化 基本使用 安裝vuex npm install vuex 建立例項 import vuex from vuex import vue from vue vue.use vuex co...

vuex的基本使用

首先先建立乙個store.js 安裝vue,vuex什麼的就不說了 這是乙個倉庫 import vue from vue import vuex from vuex vue.use vuex 裝載資料的乙個倉庫 const state 修改倉庫的方法 const mutations reduce s...