vue3 state对象赋值无效

在 Vue 3 中，使用了 Composition API 来管理组件的状态，一个常见的问题就是在 state 对象中直接赋值，但是界面没有更新。

这个问题的原因和 Vue 2 中的问题类似，直接给一个对象赋值时，Vue.js 无法检测到这个变化，从而无法触发更新。

解决这个问题的方法是使用 `Vue.set` 或 `this.$set`，不过在 Vue 3 中需要先将 state 对象包装成 `reactive`，然后再使用 `Vue.set` 或 `this.$set`。例如：

import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      obj: {
        key: 'value'
      }
    })

    const updateValue = (value) => {
      Vue.set(state.obj, 'key', value)
    }

    return {
      ...toRefs(state),
      updateValue
    }
  }
}

其中 `state` 对象使用 `reactive` 包装，`toRefs` 将 `state` 对象转换成响应式的对象，并且使用展开运算符将 `state` 对象的属性解构出来，方便在模板中使用。`updateValue` 方法则使用 `Vue.set` 来更新 `state.obj` 的值。

另外一种方法是使用 `ref` 包装 `state` 对象。例如：

import { reactive, ref } from 'vue'

export default {
  setup() {
    const state = reactive({
      obj: {
        key: 'value'
      }
    })

    const stateRef = ref(state)

    const updateValue = (value) => {
      Vue.set(stateRef.value.obj, 'key', value)
    }

    return {
      state: stateRef,
      updateValue
    }
  }
}

其中使用 `ref` 包装 `state` 对象，然后在模板中使用 `state.value` 来访问 `state` 对象。`updateValue` 方法则使用 `Vue.set` 来更新 `state.value.obj` 的值。