vue 解决provide和inject响应的问题

当使用Vue中的provide和inject API时，如果模板中的组件在provide对象中的属性发生变化时，如果没有使用Vue的响应式系统来触发变更，那么inject引入的属性也不会发生更新，因此需要使用Vue的$set方法来解决这个问题。

下面是使用Vue解决provide和inject响应的问题的攻略：

1. 需要将provide的数据变成响应式数据，可以通过Vue的reactive或ref API来实现：

// 在provide中增加一个响应式对象
provide() {
  const state = reactive({
    count: 0
  })
  return {
    state
  }
}

或者：

// 在provide中增加一个响应式变量
provide() {
  const count = ref(0)
  return {
    count
  }
}

1. 在使用inject引入provide中的数据时，需要使用Vue的compositon API提供的reactive或ref API来对数据进行响应：

// 在组件中引入provide中的响应式对象
import { inject } from "vue";

export default {
  setup() {
    const state = inject("state");
    return {
      state,
    };
  },
};

或者：

// 在组件中引入provide中的响应式变量
import { inject } from "vue";

export default {
  setup() {
    const count = inject("count");
    return {
      count,
    };
  },
};

示例1：使用provide和inject解决跨组件状态共享问题

// 声明共享状态，这里使用响应式对象来实现
const state = reactive({
  count: 0
})

// 组件1，在provide中暴露出count属性
export default {
  name: 'comp1',
  provide() {
    return { count: state.count }
  },
  // 响应式绑定count属性
  template: '<div>{{count}}</div>',
  setup() {
    const count = computed(() => state.count)
    return { count }
  }
}

// 组件2，从provide中inject出count属性
export default {
  name: 'comp2',
  inject: ['count'],
  // 响应式绑定count属性
  template: '<div>{{count}}</div>',
  setup() {
    const count = computed(() => state.count)
    return { count }
  }
}

示例2：使用provide和inject实现路由状态共享

// 声明共享状态
const state = reactive({
  currentRoute: null
})

// 在router.beforeEach中更新共享状态
router.beforeEach((to, from, next) => {
  state.currentRoute = to
  next()
})

// 组件，在provide中暴露出当前路由属性
export default {
  name: 'comp',
  provide() {
    return { currentRoute: state.currentRoute }
  },
  // 响应式绑定currentRoute属性
  template: '<div>{{currentRoute}}</div>',
  setup() {
    const currentRoute = computed(() => state.currentRoute)
    return { currentRoute }
  }
}