Provide / Inject 组件内全局状态

2022-05-18

当我们遍写一个复杂的组件时，在组件内部也希望量化功能，拆解成不同的小组件构成，那在组件内部难免就需要维护公用的状态。
这就是父子组件通信，假如组件层级很深，那传递数据就会变得很麻烦而且难维护，本文将讲解Provide和Inject的使用和响应式的多种写法。

假设组件结构为

Q
- A
- - A1
- B

基础写法

Q
...
provide:{
  name:"张三"
}
...

A1
...
inject:['name'] // name->张三
...

响应式

官方提供的解决方案，这样做的优点是改变的方法逻辑在父级中，好维护。

Q
...
import { computed } from 'vue';
data() {
  return {
    moneyComputed: 0
  }
},
provide(){
  moneyComputed: computed({
    get: () => {
      return this.moneyComputed;
    },
    set: (val) => {
      this.moneyComputed = val;
    },
  }),
}
...

A1
...
inject:['moneyComputed'] // moneyComputed->0 设置值的时候会调用set方法
...

保留数据响应式传递

Q
...
data() {
  return {
    obj:{money:0}
  }
},
provide() {
  return {
    obj: this.obj //传递对象 浅拷贝将保留内容响应式
  }
}
...

A1
...
inject:['obj'] // obj.maoney->0 支持响应式
...

向所有子组件提供响应式数据

Q
...
import {ref} from 'vue'
...
provide() {
  return {
    money: ref(0) //传递响应式数据
  }
}
...

A1
...
inject:['money'] // money.value->0 更改money.value支持响应式
...

以上方式支持Q组件内状态独立管理，不会影响到另一个Q组件

假设有一个需求，需要多个Q组件之间共享数据，这就使用全局状态管理，但不想使用vuex，只想使用Provide / Inject 得如何实现呢

使用computed监听数据改动，eventBus传递事件，类似于父子组件通信

注册EventBus
createApp方式
...
const { createApp } = require('vue');
import App from './App.vue';
import mitt from 'mitt';

const app = createApp(App);

app.config.globalProperties.$emitter = mitt();

app.mount('#app');
...

Vue实例方式
...
import Vue from 'vue'
Vue.prototype.$EventBus = new Vue()
...

Q
...
data() {
  return{
    money: 0
  }
},
provide() {
  return {
    money: () => this.money
  }
},
created() {
  this.$emitter.on('plusMoney', (val)=>{ //监听plusMoney事件
    this.money+=val
  });
},
...
A1
...
money:{{ _money }}
<button @click="plusMoney">+1</button>
...
computed: {
  _money() {
    return this.money();
  },
},
methods:{
  plusMoney() {
    this.$emitter.emit('plusMoney', 1); //将会发送plusMoney事件
  },
}
...

使用精简版的vuex

创建global.js注册响应式数据，做一个精简版的vuex
...
import { ref } from 'vue';
export default {
  number: ref(0),
};
...
Q
...
import global from './global';
data() {
  return {
    globalMoneyRef: global.moneyRef,
  }
},
provide() {
  return {
    globalMoneyRef: global.moneyRef,
  };
},
...
A1
...
inject:['globalMoneyRef'] // globalMoneyRef.value支持响应式
...

Demo
参考文献