मैं बस कॉल करने में सक्षम होना चाहता हूँ

{{ globalThing(0) }}

टेम्पलेट्स में, प्रत्येक .vue फ़ाइल में GlobalThing को परिभाषित करने की आवश्यकता के बिना।

मैंने सभी प्रकार के प्लगइन कॉन्फ़िगरेशन (या मिक्सिन? सुनिश्चित नहीं हैं कि Nuxt उस शब्दावली का उपयोग करता है।) की कोशिश की है, सभी का कोई फायदा नहीं हुआ। ऐसा लगता है कि मैं कुछ भी करूं, globalThing और this.globalThing अपरिभाषित रहते हैं।

कुछ मामलों में, मैं क्रोम में भी डीबग कर सकता हूं और देख सकता हूं कि यह this.globalThing वास्तव में परिभाषित है ... लेकिन कोड वैसे भी दुर्घटनाग्रस्त हो जाता है, जिसे समझाना मुझे बहुत मुश्किल लगता है।

यहाँ मेरे कई प्रयासों में से एक है, इस बार एक प्लगइन का उपयोग करना:

Nuxt.config.js:

plugins: [
    {
        src: '~/plugins/global.js',
        mode: 'client'
    },
],

वैश्विक.जेएस:

import Vue from 'vue';
Vue.prototype.globalFunction = arg => {
    console.log('arg', arg);
    return arg;
};

और .vue फ़ाइल में टेम्पलेट में:

        <div>gloabal test {{globalFunction('toto')}}</div>

और ... परिणाम:

TypeError _vm.globalFunction कोई फ़ंक्शन नहीं है


यहाँ एक अलग विचार है, Vuex store का उपयोग करना।

स्टोर/index.js:

export const actions = {
    globalThing(p) {
        return p + ' test';
    }
};

.vue फ़ाइल टेम्प्लेट: परीक्षा परिणाम: {{test('fafa')}}

.vue फ़ाइल स्क्रिप्ट:

import { mapActions } from 'vuex';

export default {

    methods: {
        ...mapActions({
            test: 'globalThing'
        }),
    }
};

आआआआआआआआआआआआआआआआआंड नतीजा है......

परीक्षा परिणाम: [वस्तु वादा]

ठीक है, तो कम से कम इस बार विधि मौजूद है। मैं प्रत्येक घटक में इस "आयात नक्शा क्रिया" नृत्य आदि करने के लिए मजबूर नहीं होना पसंद करूंगा ... लेकिन अगर यह वास्तव में एकमात्र तरीका है, जो भी हो।

हालाँकि, मुझे केवल एक वादा मिलता है, क्योंकि यह कॉल async है। जब यह पूरा हो जाता है, तो वादे में वास्तव में लौटा हुआ मूल्य होता है, लेकिन इसका कोई फायदा नहीं है, क्योंकि मुझे इसे विधि से वापस करने की आवश्यकता है।


संपादित करें

क्लाइंट पर, "यह" अपरिभाषित है, सिवाय इसके कि ..... यह नहीं है! यानी,

console.log('this', this); 

"अपरिभाषित" कहता है, लेकिन क्रोम के डिबगर का दावा है कि, इस कंसोल लॉग के ठीक बाद, "यह" ठीक वैसा ही है जैसा इसे (घटक उदाहरण) माना जाता है, और ऐसा ही यह है।$स्टोर!

मैं सबूत के तौर पर यहां एक स्क्रीनशॉट जोड़ रहा हूं, क्योंकि मुझे अपनी आंखों पर भी विश्वास नहीं हो रहा है।

just plain not possible

12
Marc 26 अगस्त 2019, 16:47
1
import Vue from 'vue'; Vue.prototype.globalThing = arg => { ... } क्या आपको इसकी आवश्यकता हो सकती है?
 – 
talkhabi
26 अगस्त 2019, 16:49
कोशिश की। काम नहीं किया।
 – 
Marc
26 अगस्त 2019, 17:34
प्लगइन्स वह चीज है जिसे आप ढूंढ रहे हैं। अगला दस्तावेज़ जांचें और पुनः प्रयास करें। अगर वह काम नहीं करता है, तो आइए हम आपका कोड किसी तरह देखें
 – 
Emīls Gulbis
26 अगस्त 2019, 17:45
हां, मैंने यही सोचा था, लेकिन मैं इस प्लगइन सुविधा का उपयोग पूरी दोपहर के लिए करने की कोशिश कर रहा हूं, और मैं अपने लक्ष्य के करीब नहीं हूं। आपके द्वारा वर्णित मामले को दर्शाने के लिए कोड जोड़ा गया।
 – 
Marc
26 अगस्त 2019, 17:58
क्या वह दस्तावेज़ीकरण जिसका आप उल्लेख कर रहे हैं nuxtjs.org/guide/plugins ? क्योंकि इसमें टेम्प्लेट से कॉल करने का कोई जिक्र नहीं है। इसके बाद Vue प्लगइन्स दस्तावेज़ है, यहाँ vuejs.org/v2/guide/plugins.html a> ... जो वास्तव में Nuxt डॉक्स से काफी भिन्न है। मुझे नहीं पता... शायद मैं वही करने की कोशिश करूँगा जो Vue डॉक्स में वर्णित है, वैसे भी।
 – 
Marc
26 अगस्त 2019, 18:05

3 जवाब

सबसे बढ़िया उत्तर

https://nuxtjs.org/guide/plugins/

इसे $root & संदर्भ अनुभाग में Inject में समझाएं।

आपको अपने वैश्विक तरीकों को Vue इंस्टेंस और संदर्भ में इंजेक्ट करना होगा।

उदाहरण के लिए हमारे पास एक hello.js फ़ाइल है।

प्लगइन्स/hello.js में:

export default (context, inject) => {
  const hello = (msg) => console.log(`Hello ${msg}!`)
  // Inject $hello(msg) in Vue, context and store.
  inject('hello', hello)
  // For Nuxt <= 2.12, also add 👇
  context.$hello = hello
}

और फिर इस फ़ाइल को nuxt.config.js में जोड़ें:

export default {
  plugins: ['~/plugins/hello.js']
}
17
Amin 14 जुलाई 2020, 09:12

Vuex और Nuxt के साथ यह दृष्टिकोण होगा:

// store/index.js

export const state = () => ({
    globalThing: ''
})

export const mutations = {
    setGlobalThing (state, value) {
        state.globalThing = value
    }
}


// .vue file script

export default {
    created() {
        this.$store.commit('setGlobalThing', 'hello')
    },
};



// .vue file template

{{ this.$store.state.globalThing }}
0
eddx 26 अगस्त 2019, 20:58
1
नहीं। यह ग्लोबलथिंग को पैरामीटर पास करने का कोई तरीका नहीं प्रदान करता है, जैसा कि प्रश्न में दिखाया गया है: {{globalFunction('toto') }}
 – 
Marc
26 अगस्त 2019, 21:41
  1. हर जगह उपलब्ध विधि प्राप्त करने के लिए Nuxt के इंजेक्शन का प्रयोग करें
export default ({ app }, inject) => {
  inject('myInjectedFunction', (string) => console.log('That was easy!', string))
}
  1. सुनिश्चित करें कि आप उस फ़ंक्शन को $myInjectedFunction के रूप में एक्सेस करते हैं (नोट $)
  2. सुनिश्चित करें कि आपने इसे nuxt.config.js प्लगइन्स अनुभाग में जोड़ा है

यदि अन्य सभी विफल हो जाते हैं, तो फ़ंक्शन को किसी ऑब्जेक्ट में लपेटें और ऑब्जेक्ट को इंजेक्ट करें ताकि आपके टेम्प्लेट में $myWrapper.myFunction() जैसा कुछ हो - हम सभी जगह प्लगइन्स से इंजेक्ट की गई वस्तुओं का उपयोग करते हैं और यह काम करता है (उदाहरण के लिए v-if in टेम्पलेट, इतना पूरा यकीन है कि यह {{}} से भी काम करेगा)।

उदाहरण के लिए, हमारा analytics.js प्लग इन अधिक कम दिखता है:

import Vue from 'vue';
const analytics = {
    setAnalyticsUsersData(store) {...}
    ...
}

//this is to help Webstorm with autocomplete
Vue.prototype.$analytics = analytics;

export default ({app}, inject) => {
    inject('analytics', analytics);
}

जिसे तब $analytics.setAnalyticsUsersData(...) कहा जाता है

पी.एस. अभी कुछ नोटिस किया। क्लाइंट मोड में आपका प्लगइन है। यदि आप यूनिवर्सल में चल रहे हैं, तो आपको यह सुनिश्चित करना होगा कि SSR के दौरान इस प्लगइन (और फ़ंक्शन) का कहीं भी उपयोग नहीं किया गया है। यदि यह टेम्प्लेट में है, तो संभव है कि यह वास्तव में SSR के दौरान उपयोग किया जाता है और इस प्रकार यह अपरिभाषित है। दोनों मोड में भी चलने के लिए अपना प्लगइन बदलें।

17
Lili 5 सितंबर 2019, 02:38
खैर, यह लगभग काम कर गया। प्लगइन फ़ंक्शन वास्तव में पाया और कहा जाता है, जो एक छोटा चमत्कार है, लेकिन अब उस फ़ंक्शन में "this.$store" अपरिभाषित है। तो... ऐसा लगता है कि "यह" वह नहीं है जो होना चाहिए था, अर्थात। घटक उदाहरण। स्टोर इंस्टेंस ढूंढना हमेशा गर्दन में एक अजीब दर्द होता है ... उन्होंने स्टोर को वैश्विक संस्करण क्यों नहीं बनाया, मुझे नहीं लगता कि मैं कभी समझ पाऊंगा। ओह, और प्लगइन को सर्वर-साइड उपलब्ध कराने के बारे में अच्छी कॉल। वह समस्या का बहुत हिस्सा था।
 – 
Marc
5 सितंबर 2019, 16:19
तो यह खरगोश का छेद बस जिज्ञासु होता रहता है। तो सर्वर पर, "यह" अपरिभाषित है, जो मुझे लगता है कि सामान्य है, और वैसे भी, हमारे पास कोई $ store नहीं होगा, तो कौन परवाह करता है। लेकिन .... क्लाइंट पर, "यह" भी अपरिभाषित है, सिवाय इसके कि ..... यह नहीं है! यही कहना है, कंसोल.लॉग ('यह', यह); "अपरिभाषित" कहता है, लेकिन क्रोम के डिबगर का दावा है कि, इस कंसोल लॉग के ठीक बाद, "यह" ठीक वैसा ही है जैसा इसे माना जाता है, और ऐसा ही यह है।$स्टोर! मैं प्रमाण के रूप में प्रश्न में एक स्क्रीनशॉट जोड़ रहा हूं, क्योंकि मुझे अपनी आंखों पर भी विश्वास नहीं हो रहा है।
 – 
Marc
5 सितंबर 2019, 16:38
1
यह घटक बनने के बाद ही उपलब्ध होगा, इसलिए यह निर्भर करता है कि आप इसे कहां एक्सेस करने का प्रयास कर रहे हैं - उदाहरण के लिए, इससे पहले इसे हुक करें। अपरिभाषित होगा। वही विभिन्न Nuxt हुक पर लागू होता है। हो सकता है कि आपको मेरी पोस्ट की यह श्रंखला मददगार लगे? dev.to/lilianaziolek/…
 – 
Lili
5 सितंबर 2019, 16:43
इस विशिष्ट मामले में, आप इसे Nuxt संदर्भ से निकालने के लिए जोड़कर स्टोर तक पहुंच सकते हैं, अर्थात: export default ({ app, store }, inject)
 – 
Lili
5 सितंबर 2019, 16:46
साथ ही, Devtools संदर्भ में निष्पादित आदेशों पर भरोसा न करें - वे आपके विचार से भिन्न संदर्भ में कार्य कर सकते हैं। लॉग स्टेटमेंट पर भरोसा करें।
 – 
Lili
5 सितंबर 2019, 16:47