vue基礎(2.狀態管理庫vuex)
vue主要包括的內容(框架):
vue3專案中如何配置路由、
動態路由、
動態路由切換時的特點、
狀態管理庫vuex、
vue3合成API----setup()
狀態管理庫vuex1. Vuex是一個專為Vue.js應用程式開發的狀態管理庫。狀態是指元件之間共享的資料。
2. vue專案中配置狀態管理庫vuex的流程:
①下載並引入vuex相關內容
②建立狀態管理庫物件store
③對外丟擲store物件
④在main.js中將store物件與當前vue專案相關聯
3. store狀態管理庫物件重要組成部分:
①state:元件之間共享的資料集合
元件中2種獲取方法:
直接獲取this.$store.state.xxx
使用物件展開運算子...mapState的形式獲取 ...mapState(['xxx','xxx']))
②getters:相當於store物件計算屬性(主要用於對state的資料進行過濾)
元件中2種獲取方法:
直接獲取this.$store.getters.xxx
使用物件展開運算子...mapGetters的形式取 ...mapGetters(['xxx','xxx']))
③mutations:定義了修改store物件中state資料的同步方法(要修改的資料不是ajax非同步獲取的)元件中如何觸發
直接使用commit觸發this.$store.commit(xxx,’傳遞的引數’)
使用物件展開運算子...mapMutations的形式獲取 ...mapMutations(['xxx','xxx']))
④actions:定義了修改state資料的非同步方法(修改資料是ajax獲取的非同步資料)元件中如何觸發
直接使用dispatch觸發this.$store.dispatch(xxx,’傳遞的引數’)
使用物件展開運算子...mapActions的形式獲取 ...mapActions(['xxx','xxx']))