Как вызвать метод в настройке приложения vuejs3?

В приложении vuejs3 я извлекаю данные из db с помощью метода axios in, например:

<script>
  import appMixin from '@/appMixin'
  import app from './../../App.vue' // eslint-disable-line
  import axios from 'axios'

  const emitter = mitt()

  export default {
    name: 'adminCategoriesList',
    mixins: [appMixin],
    data: function () {
      return {
        categoriesPerPage: 20,
        currentPage: 1,
        categoriesTotalCount: 0,
        categories: []
      }
    },

    components: {
    },
    setup () {
      const adminCategoriesListInit = async () => {
        this.loadCategories() // ERROR HERE
      }

      function onSubmit (credentials) {
        alert(JSON.stringify(credentials, null, 2))
        console.log('this::')
        console.log(this)
        console.log('app::')
      }

      onMounted(adminCategoriesListInit)

      return {
        // schema,
        onSubmit
      }
    }, // setup

    methods: {
      loadCategories() {
        ...
      }

и я получил ошибку в консоли браузера:

Cannot read property 'loadCategories' of undefined

Если убрать «это». при вызове loadCategories я получил ошибку:

'loadCategories' is not defined

Мне нужно сделать loadCategories как метод, так как мне нужно вызывать его из разных мест.

Какой путь правильный?

Спасибо!


vue.js vuejs3 vue-composition-api
person mstdmstd    schedule 09.11.2020    source источник
comment
Вы хотите вернуть метод loadCategories из setup. Кроме того, я бы предложил использовать либо полный Composition API, либо API опций, но не оба сразу.   -  person Yom T.    schedule 09.11.2020
comment
Я предпочитаю Composition API, но каким образом? Что не так в моей структуре сейчас?   -  person mstdmstd    schedule 09.11.2020
comment
Что ж, попробуйте поместить метод в обратный вызов setup и вернуть его оттуда. Это позволяет вам получить к нему доступ, а также выставить его в шаблоне (после возврата).   -  person Yom T.    schedule 09.11.2020

Ответы (1)


arrow_upward
5
arrow_downward

Вы можете использовать api композиции и параметров в одном компоненте, но для разных свойств и методов, в вашем случае свойства данных могут быть определены внутри хука setup с помощью _ 2_ или reactive, методы могут быть определены как простые функции js:

import {ref} from 'vue'
 export default {
    name: 'adminCategoriesList',
    mixins: [appMixin],
    components: {
    },
    setup () {
        const categoriesPerPage= ref(20);
        const currentPage=ref(1);
        const categoriesTotalCount=ref(0),
        const categories=ref[])
 

      const adminCategoriesListInit = async () => {
       loadCategories()
      }

      function onSubmit (credentials) {
        alert(JSON.stringify(credentials, null, 2))
  
      }
      functions loadCategories(){
        ...
      }
      onMounted(adminCategoriesListInit)

      return {
        // schema,
        onSubmit,
        categoriesPerPage,
        currentPage,
        categoriesTotalCount,
        categories
      }
    },

свойства, определенные ref, могут использоваться / изменяться property.value и использоваться в шаблоне, например {{property}}

person Boussadjra Brahim    schedule 09.11.2020
comment
Спасибо! Пожалуйста, поподробнее про реф по ссылке, где это описано? - person mstdmstd; 09.11.2020
comment
добро пожаловать, я добавил ссылку на официальные документы и посмотрите это видео - person Boussadjra Brahim; 09.11.2020