首頁猿問 using vuejs...

using vuejs mixins in js file

JavaScript

繁花如伊 2022-09-29 15:45:04

我有一個系統，我必須設置一些可重用的函數來在整個應用程序中使用，現在我已經在我的主文件中創建了一個vue mixin，現在當我從vue組件調用該函數時，它工作得很好，但是當我嘗試在js文件中調用相同的函數時，我得到一個錯誤，這是我的代碼main.jsundefined主要.jsVue.mixin({ methods: { test: function () { return 1; }, }});維尤組件//this works async created() { alert(this.test()); }服務.jsimport { API } from 'aws-amplify';import { Auth } from "aws-amplify";import axios from 'axios'export default {somefunction(){//this doesnot work alert(this.test());}}有人可以告訴我如何在常規js文件中使用vue mixins，我在互聯網上查找，但找不到與此相關的任何內容

查看完整描述

3 回答

慕尼黑8549860

TA貢獻1818條經驗獲得超11個贊

// mixin.js

export myMixin = { computed: { foo(): 'hi' } }

只需創建一個對象（并可能將其標記為導出），然后將其添加到 vue 中即可。

它只是一個對象。它有特殊的名稱，如，等等，但它只是一個對象。computeddata

// usage.vue

import { myMixin } from './path/to/myMixin.js'

console.log( myMixin.computed.foo ) // hi

export default {

mixins: [ myMixin ],

computed: { bar(): { this.foo } // hi

}

在上面的例子中，我沒有使用全局 mixin，因為，引用 vue 文檔

稀疏而謹慎地使用全局 mixin，因為它會影響創建的每個 Vue 實例，包括第三方組件。

現在，如果你真的需要一個全局 mixin，這就是為什么它適用于，但請注意，要在 vue 之外使用，你需要通過全局范圍訪問它，就像，或者像上面一樣導入它。有關更多信息，請參閱如下查詢：js中的全局函數。myMixinexport defaultwindow

我的偏好：

// in a file at /path/to/index.js

export { myMixin1 } from './myMixin1' // ...

// usage.vue

import { myMixin1, myMixin2 } from './path/to'

export default { mixins: [ ... ] }

或者在需要時，（因為米辛可以包括其他米辛;)盡管我發現在其他JS中使用它們更難

export myMixin1 = { ... }

export myMixin2 = {

mixins: [ myMixin1 ]

// ...

}

// usage.vue

import { myMixin2 } from 'path/to/myMixins'

export default {

mixins: [ myMixin2 ] // contains both 1 and 2

}

請注意，您也可以在 Vue 文件（單個文件組件）中聲明，然后從中導入，就像它們是 Javascript 一樣。

此外，您（顯然）不需要導出它們 - 它們對于分離關注點已經很有用。

// example.vue

export myMixin = { ... }

// all mixins can interact with each other

// because in the end, they will be parts of the same object

myToggle = { ... }

mySuperComplicatedBit = { ... }

// so B can call this.A

export default {

mixins: [

myMixin,

myToggle,

mySuperComplicatedBit

...

}

</script>

<template> ...

// other.vue or other.js

import { myMixin } from 'path/to/example.vue'

干杯，祝你好運

反對回復 2022-09-29

胡說叔叔

TA貢獻1804條經驗獲得超8個贊

你只能在 Vue 組件中調用 mixin 中的方法。mixin的作用是擴展 vue 組件。我會在單獨的服務或實用程序js中從您的mixin中提取邏輯，然后在mixin和服務中使用它.js

反對回復 2022-09-29

絕地無雙

TA貢獻1946條經驗獲得超4個贊

如果你的 mixin 是通用的，你可以使用一個全局 mixin 并通過主應用程序訪問它。但我真的不明白這一點，那么為什么首先要有一個混合體呢？

主要.js

export default new Vue({

mixins: [YourMixin]

...

})

一些代碼.js

import vue from ?./main.js‘

vue.method()

編輯：建議

說實話，我寧愿把你的實現轉過來，讓一個服務公開一個功能，然后通過mixin集成到 Vue 組件中。

反對回復 2022-09-29

3 回答
0 關注
113 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

using vuejs mixins in js file

using vuejs mixins in js file

3 回答

添加回答