1. 程式人生 > 其它 >vue基礎(2.狀態管理庫vuex)

vue基礎(2.狀態管理庫vuex)

vue主要包括的內容(框架):

    vue3專案中如何配置路由、

    動態路由、

    動態路由切換時的特點、

    狀態管理庫vuex、

    vue3合成API----setup()

  狀態管理庫vuex

1.  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']))