Блог

Я выполняю вызов Axios в методе настройки моего компонента. Затем я хочу установить переменную с именем books. В vue 2 я бы сделал вызов в созданном перехватчике, а затем использовал this для установки переменной. В vue 3 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 }
  }
  

Согласно документам composition api :

реактивный
Принимает объект и возвращает реактивный прокси исходного …
…
ссылка
Принимает внутреннее значение и возвращает реактивный и изменяемый объект ref. Объект ref имеет единственное свойство .значение, которое указывает на внутреннее значение …

Таким 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 }
  }