Обновите реактивные данные в обратном вызове ответа axios внутри параметра настройки - Vue 3

Я делаю вызов 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 }
  }

javascript vue.js axios vuejs3 vue-composition-api
person Taylor    schedule 15.11.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Согласно документам API композиции:

reactive
Принимает объект и возвращает реактивный прокси-сервер оригинала ...
...
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 }
  }
person Boussadjra Brahim    schedule 15.11.2020
comment
При использовании реактивного вызова эта ошибка Argument of type '{ books: undefined[]; }' is not assignable to parameter of type 'Book[]'. может быть вызвана тем, что ожидается единственный объект? Использование ref работает, но, насколько я понимаю, не следует использовать ref с примитивными типами? Массив - это не так, что сбивает с толку. - person Taylor; 15.11.2020
comment
Это проблема с набором текста, она может обогатить код для его отладки. - person Boussadjra Brahim; 15.11.2020
comment
Да ref для примитивных типов, но может принимать тип объекта / массива - person Boussadjra Brahim; 15.11.2020
comment
Хм, это немного сбивает с толку, что вы можете использовать оба типа. Прошу прощения, но я не понимаю, что вы имеете в виду, говоря об обогащении кода? Следует добавить свой код в песочницу? - person Taylor; 15.11.2020
comment
Я имею в виду симулировать эту часть кода, чтобы определить правильный тип в реактивном - person Boussadjra Brahim; 15.11.2020
comment
Думаю, это что-то с Vetur. Как ни странно, это работает const books = reactive({ }) as Array<Book>. Код стал немного более подробным, чем если бы я использовал ссылки, потому что я должен ссылаться на все как на books.values, а не только на книги. Интересно, есть ли обратная сторона использования ссылок без примитивов? - person Taylor; 15.11.2020
comment
Давайте продолжим это обсуждение в чате. - person Taylor; 15.11.2020
comment
это books.value не books.values - person Boussadjra Brahim; 15.11.2020
comment
Books.value не работает там, где работает books.values. Books.value бросает Property 'value' does not exist on type 'Book[]'. Did you mean 'values'? - person Taylor; 15.11.2020