Vuex-有解無憂

Vuex

1.概念

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

我們先來看看用全域事件總線實作多組件共享資料的方式：

vuex實作

2.何時使用？

? 多個組件需要共享資料時

3.搭建vuex環境

安裝vuex

npm i vuex@3

創建檔案：src/store/index.js
該檔案用于創建vuex中最為核心的store

//引入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
})

4.基本使用

初始化資料、配置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中的資料：this.$store.dispatch('action中的方法名',資料) 或 this.$store.commit('mutations中的方法名',資料)

備注：若沒有網路請求或其他業務邏輯，組件中也可以越過actions，即不寫dispatch，直接撰寫commit

5.getters的使用

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

在store.js中追加getters配置

......

const getters = {
   // bigSum有一個引數就是state
	bigSum(state){
		return state.sum * 10  // 回傳什么bigSum就是什么值
	}
}

//創建并暴露store
export default new Vuex.Store({
	......
	getters
})

組件中讀取資料：$store.getters.bigSum

6.四個map方法的使用

匯入四個mapimport {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

mapState方法：用于幫助我們映射state中的資料為計算屬性

computed: {
    //借助mapState生成計算屬性：sum、school、subject（物件寫法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成計算屬性：sum、school、subject（陣列寫法）
    ...mapState(['sum','school','subject']),
},

mapGetters方法：用于幫助我們映射getters中的資料為計算屬性

computed: {
    //借助mapGetters生成計算屬性：bigSum（物件寫法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成計算屬性：bigSum（陣列寫法）
    ...mapGetters(['bigSum'])
},

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

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（物件形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（陣列形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

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

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

備注：mapActions與mapMutations使用時，若需要傳遞引數需要：在模板中系結事件時傳遞好引數，否則引數是事件物件，

7.模塊化+命名空間

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

修改store.js

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'}),

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/534199.html

標籤：其他

上一篇：Vue3 企業級優雅實戰 - 組件庫框架 - 5 組件庫通用工具包

下一篇：類圖中的繼承和組合問題