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

Posted 2023-02-22

【中文标题】在设置选项内的 axios 响应回调中更新反应数据 - Vue 3

【英文标题】：Update a reactive data in axios response callback inside setup option - Vue 3

【发布时间】：2021-02-27 01:47:02

【问题描述】：

我正在组件的 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 
  

【参考方案1】：

根据composition api docs：

反应性 接受一个对象并返回原始的反应代理 ... ...参考 接受一个内部值并返回一个反应性和可变的 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 
  

【讨论】：

使用响应式抛出此错误Argument of type ' books: undefined[]; ' is not assignable to parameter of type 'Book[]'. 也许是因为它需要一个对象？使用 ref 确实有效，但据我了解， ref 不能与原始类型一起使用吗？数组并不是那么令人困惑。

这是一个打字问题，可以丰富code以便调试它

是的 ref 适用于原始类型，但它可以采用对象/数组类型

嗯，您可以同时使用这两种类型似乎有点令人困惑。我很抱歉，但我不明白你关于丰富代码的意思？应该将我的代码添加到沙箱吗？

我的意思是模拟这部分代码，以便在响应式中定义正确的类型