Provide/inject怎么写

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情 上次说到Provide传递响应式，那么传递的格式是就是这样的

provide() {
    return {
      todoLength: Vue.computed(() => this.todos.length)
    }
  }

这样就传递了一个响应式的属性，任何对 todos.length 的改变都会被正确地反映在注入todoLength 的组件中。 为了增加 provide 值和 inject 值之间的响应性，我们可以在 provide 值时使用 ref 或 reactive。

import { provide, reactive, ref } from 'vue'
....
setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    provide('location', location)
    provide('geolocation', geolocation)
}

创建独立的响应值作为refs

ref会返回一个可变的响应式的对象，该对象作为一个响应式的引用维护着它内部的值，这就是 ref 名称的来源。该对象只包含一个名为 value 的 property：

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

看上边的用法，定义一个count值为ref。可以通过修改该对象的value来进行值的改变。

Vuex

整个应用共享同一个状态，也就是包含同一个store实例（vuex在项目中为store文件夹）单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。取值时使用计算属性获取。它是通过vue的插件系统将store实例注入到所有的子组件中去。并且组件可以通过this.$store访问到。（当我们需要获取的数据很多时，重复的语句会变得冗余可以通过mapState来帮助我们获取多个状态，count: state => state.count,

不可以将所有数据都放在vuex中，虽然取数据会很方便，但是全局的东西多起来就会影响性能，所以我们只需要将必须的数据放在vuex中进行管理就好了，一些组件专用的数据就不需要放在vuex中了不安全的同时也会臃肿。

当我们需要对vuex中的数据进行处理并且不只一个组件需要用到这种处理的话，vuex提供定义getter，可以理解为vuex中的计算属性getter接受state为第一参数写法和computed相同。