Vuex

1 概念

在Vue中實現集中式狀態（數據）管理的一個Vue插件，對vue應用中多個組件的共享狀態進行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。

2 何時使用

多個組件需要共享數據時

3 創建vuex環境

創建文件: src/store/index.js

//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應用Vuex插件
Vue.use(Vuex)
   
//準備actions對象——響應組件中用戶的動作
const actions = {}
//準備mutations對象——修改state中的數據
const mutations = {}
//準備state對象——保存具體的數據
const state = {}
   
//創建并暴露store
export default new Vuex.Store({
   actions,
   mutations,
   state
})

在main.js中創建vm時傳入store配置項

//引入store
import store from './store'//創建vm
new Vue({
   el:'#app',
   render: h => h(App),
   store
})

基本使用

初始化數據、配置，配置actions、mutations

編輯store.js文件

   //引入Vue核心庫
   import Vue from 'vue'
   //引入Vuex
   import Vuex from 'vuex'
   //引用Vuex
   Vue.use(Vuex)
   
   const actions = {
       //響應組件中加的動作
       jia(context,value){
           // console.log('actions中的jia被調用了',miniStore,value)
           context.commit('JIA',value)
       },
   }
   
   const mutations = {
       //執行加
       JIA(state,value){
           // console.log('mutations中的JIA被調用了',state,value)
           state.sum += value
       }
   }
   
   //初始化數據
   const state = {
      sum:0
   }
   
   //創建并暴露store
   export default new Vuex.Store({
       actions,
       mutations,
       state,
   })

組件中讀取vuex中的數據

$store.state.sum

組件中修改vuex中的數據

$store.dispatch('action中的方法名',數據)
// 若沒有網絡請求或其他業務邏輯，組件中也可以越過actions,即不寫dispatch,直接編寫commit
$store.commit('mutations中的方法名',數據)

getters的使用

概念：當state中的數據需要經過加工后使用時，可以使用getters加工

const getters = {
   bigSum(state){
       return state.sum * 10
   }
}
   
//創建并暴露store
export default new Vuex.Store({

   actions,
   mutations,
   state,
   getters

})

組件中讀取數據：

$store.getters.bigSum

四個map方法的使用

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

1 mapState方法：用于幫忙我們映射state中的數據為計算屬性

  computed: {
       //借助mapState生成計算屬性：sum、school、subject（對象寫法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
            
       //借助mapState生成計算屬性：sum、school、subject（數組寫法）
       ...mapState(['sum','school','subject']),
  }

2 mapGetter方法：用于幫助我們映射getters的數據為計算屬性

   computed: {
       //借助mapGetters生成計算屬性：bigSum（對象寫法）
       ...mapGetters({bigSum:'bigSum'}),
   
       //借助mapGetters生成計算屬性：bigSum（數組寫法）
       ...mapGetters(['bigSum'])
   }

3 mapActions方法：用于幫助我們生成與actions對話的方法，即：包含 $store.dispatch(xxx)的函數

   methods:{
       //靠mapActions生成：incrementOdd、incrementWait（對象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
       //靠mapActions生成：incrementOdd、incrementWait（數組形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }

4 mapMutations方法：用于幫助我們生成與mutations對話的方法，即：包含$store.commit(xxx)的函數

   methods:{
       //靠mapActions生成：increment、decrement（對象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
       
       //靠mapMutations生成：JIA、JIAN（對象形式）
       ...mapMutations(['JIA','JIAN']),
   }

備注：mapActions與mapMutations使用時，若需要傳遞參數：在模版中綁定事件時傳遞好參數，否則參數是事件對象。

模塊化 + 命名空間

目的：讓代碼更好維護，讓多種數據分類更加明確

   const countAbout = {
     namespaced:true,//開啟命名空間
     state:{x:1},
     mutations: { ... },
     actions: { ... },
     getters: {
       bigSum(state){
          return state.sum * 10
       }
     }
   }
   
   const personAbout = {
     namespaced:true,//開啟命名空間
     state:{ ... },
     mutations: { ... },
     actions: { ... }
   }
   
   const store = new Vuex.Store({
     modules: {
       countAbout,
       personAbout
     }
   })

開啟命名空間后，組件中讀取state數據

//方式一：自己直接讀取
this.$store.state.personAbout.list

//方式二：借助mapState讀取：
...mapState('countAbout',['sum','school','subject']),

開啟命名空間后，組件中讀取getters數據

//方式一：自己直接讀取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters讀取：
...mapGetters('countAbout',['bigSum'])

開啟命名空間后，組件中調用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

開啟命名空間后，組件中調用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

posted @ 2023-12-27 18:54 喻聰閱讀(13) 評論(0) 收藏舉報

刷新頁面返回頂部

喻聰

臨淵羨魚，不如退而結網

Vuex

公告