Как использовать в Vuejs3 / метод настройки в mixins?

#vuejs3

#vuejs3

Вопрос:

В приложении vuejs3 я пытаюсь использовать метод настройки в mixins, как я использовал в vuejs2 мой src/appMixin.js иметь:

 import moment from 'moment-timezone'
import { settingsAwesomeFontLabels } from './app.settings.js'
    
export default {
  
  methods: {
  
    getClone: function (obj) {
      let copy = JSON.parse(JSON.stringify(obj))
      return copy
    },

  }
}   
  

и в моем файле vue :

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

// ...

  setup () {
    function loadCategories() {
      isPageLoaded = false
      let credentials = getClone(credentialsConfig)
      credentials.headers.Authorization = 'Bearer '   currentLoggedUserToken.value

          // ...
  

С помощью метода getClone я хочу получить credentialsConfig из settings.js файл
и измените заголовки с помощью токена текущего входа в систему.
Но в консоли, где я запускаю команду

 $ yarn run serve
  

Я вижу ошибку :

 /mnt/_work_sdb8/wwwroot/lar/VApps/yt3/src/admin/categories/list.vue
  234:27  error  'getClone' is not defined  no-undef
  

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

 list.vue?c790:233 Uncaught (in promise) ReferenceError: getClone is not defined
  

Я полагаю, из-за ошибки в консоли

Какой правильный способ экспортировать / импортировать getClone в метод установки?

Спасибо!

Ответ №1:

Вы могли бы реорганизовать это, чтобы использовать a composition function вместо mixin. Например, ваша getClone функция будет находиться в файле useGetClone.js :

 export default function (obj) {
    return JSON.parse(JSON.stringify(obj));
}
  

Затем в любом компоненте, который вы хотите использовать:

 import getClone from `@/composables/useGetClone`;

export default {
    setup() {
        // …

        const getClone = useGetClone(credentials);

        // …

        return {};
    },
};
  

Комментарии:

1. В моем mixin есть много методов. Я полагаю, что я могу поместить все методы в 1 js-файл с объявлениями функций экспорта по умолчанию. Должен ли я писать import methodName в любое время, когда мне нужно использовать methodName? mixin нельзя использовать с vuejs3?

2. Если все логически связано getClone , то ничто не мешает вам экспортировать объект, содержащий все связанные функции, т.Е. export default { funcOne() {}, funcTwo() {} };

3. @mstdmstd Мэтт прав, пожалуйста, прочитайте последнюю строку здесь