javascript - 在设置选项内的 axios 响应回调中更新反应数据 - Vue 3

Question

我正在组件的 Setup 方法中调用 Axios。然后我想设置一个名为 books 的变量。在 vue 2 中，我会在创建的钩子中进行调用，然后用于this设置变量。在 vue 3 中，setup 方法中没有this可用的，那么如何在 axios 调用之外访问数据？我想获取一系列书籍，然后将其设置为 books 变量。这将如何完成，在 Vue 3 中是否有更好的方法来做到这一点？我的设置方法如下：

  setup() {
      let books = reactive<Array<Book>>([])
        HTTP.get('/books')
            .then(response => {
                //Normally here I would do this.books
                books = response.data
            })
            .catch(function (error) {
                console.log(error);
            })
            return { books }
  }

标签： javascriptvue.jsaxiosvuejs3vue-composition-api

Answer 1

根据组合api文档：

reactive
接受一个对象并返回原始的响应式代理 ...
...
ref
接受一个内部值并返回一个响应式和可变的 ref 对象。ref 对象有一个属性 .value 指向内部值...

所以reactive函数应该有一个内部属性：

  setup() {
      let state = reactive<Array<Book>>({books:[]})
        HTTP.get('/books')
            .then(response => {
            
                state.books = response.data
            })
            .catch(function (error) {
                console.log(error);
            })
            return { books:toRef(state,'books') }
  }

或使用ref

  setup() {
      let books = ref<Array<Book>>([])
        HTTP.get('/books')
            .then(response => {
              
                books.value = response.data
            })
            .catch(function (error) {
                console.log(error);
            })
            return { books }
  }