如何在Vuejs3/setup方法中使用mixin

Question

在vuejs3应用程序中，我尝试在mixin中使用设置方法，就像我在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方法，我想从settings.js文件中获取credentialsConfig并使用当前登录的令牌修改头。但在控制台中，我运行命令

$ yarn run serve

我看到错误：

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

和broswer控制台中的错误：

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

我想是因为控制台中的错误

将getClone导出/导入到设置方法中的正确方法是什么？

谢谢！

Answer 1

您可以重构它以使用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 {};
},
};