मैं एक Vue प्रोजेक्ट में काम कर रहा हूँ, मैं Vue के लिए बहुत नया हूँ।

हमारे पास आउट /src/उपयोगिता फ़ोल्डर में एक db_handler.js है। यह इस तरह दिख रहा है:

import fakeApiCall from "./mock";
import axios from "axios";
import { DEBUG_MODE, API_ENDPOINT } from "./namespaces";

function fetchData(method, slug, payload) {
  //axios.defaults.headers.withCredentials = true;
  //return (!DEBUG_MODE) ? axios[method](`${API_ENDPOINT}${slug}`, payload) : fakeApiCall(slug);
  return axios[method](`${API_ENDPOINT}${slug}`, payload);

  /*var url = "http://localhost:8080" + slug

  return axios({
    method: method,
    url: url,
    headers: {
        'Authorization': payload
    }
  });*/
}

function sendData(method, slug, payload) {
  axios[method](`${API_ENDPOINT}${slug}`, payload);
}

export default fetchData

मुझे क्या जानना चाहिए: मैं अपना sendData() कैसे निर्यात कर सकता हूं? उन्होंने अब तक एक छोटे सिंटैक्स का उपयोग किया है क्योंकि उन्होंने केवल एक फ़ंक्शन निर्यात किया है। मैं कई कार्यों को कैसे निर्यात कर सकता हूं? मैं यह भी चाहता हूं कि नाम "fetchData" और "sendData" बने रहें

संपादित करें: मैंने Iamhuynq और Bergi के दृष्टिकोणों को लागू करने की कोशिश की, लेकिन अब कुछ दक्षिण की ओर जाता है। मैं सबसे पहले और सबसे महत्वपूर्ण कार्यों को आयात कर रहा हूं moduleUser.js और authUser.js जो /src/store/modules में रहते हैं। authUser.js का उपयोग उपयोगकर्ता की पहचान के लिए किया जाता है, इसलिए निश्चित रूप से इसका उपयोग लॉगिन स्क्रीन में किया जाता है। जब मैं अब लॉगिन करने का प्रयास करता हूं, तो मुझे "टाइप एरर: ऑब्जेक्ट अपरिभाषित" मिलता है। मुझे लगता है कि ऐसा इसलिए है क्योंकि सर्वर प्रतिक्रिया लौटाने वाले फ़ंक्शन किसी तरह विफल हो रहे हैं या नहीं मिले हैं।

इस व्यवहार से जुड़ा कोडबेस लॉगिन स्क्रीन है, db_handler जिसे मैंने आपको पहले ही दिखाया है और एक मॉड्यूल जिसे "moduleAuth.js" कहा जाता है।

सबसे पहले, लॉगिन स्क्रीन इस तरह दिखती है:

<template>
  <div>
    <h1>Login</h1>
    <p>Name:</p>
    <div class="inputbox">
      <input ref="username" type='text' v-on:keydown.enter="userLogin">
    </div>
    <p>Password:</p>
    <div class="inputbox">
      <input class="inputbox" ref="password" type='password' v-on:keydown.enter="userLogin">
    </div>
    <p>{{error}}</p>
    <button v-on:click='userLogin'>Login</button>
  </div>
</template>

<script>
import store from "../store/store";

import { AUTH_REQUEST } from "../store/actions/auth";

export default {
  data () {
    return {
      error: ""
    }
  },
  methods: {
    userLogin: function(){
      this.error = '';
      store.dispatch(AUTH_REQUEST,{username: this.$refs.username.value, password: this.$refs.password.value})
      .then((res) => {
        this.$router.push({path: '/profile'});
      })
      .catch((err) => {
        this.error = err;
      });
      this.$refs.password.value = '';
    }
  }
}
</script>

<style>
.inputbox{
  width: 25%;
}
</style>

moduleAuth.js, जिससे AUTH_REQUEST vue-action आ रहा है, ऐसा दिखता है:

import axios from "axios";
import Vue from 'vue';
import Vuex from 'vuex';
import {fetchData, sendData} from "../../utility/db_handler";

import { USER_REQUEST } from "../actions/user";
import { AUTH_REQUEST, AUTH_LOGOUT, AUTH_FAIL, AUTH_SUCCESS } from "../actions/auth";
import { METHOD_POST, JWT } from "../../utility/namespaces";

Vue.use(Vuex);

const storeAuth = {
  state: {
    token: localStorage.getItem(JWT) || '',
    loginState: ''
  },
  getters: {
    isAuthenticated: state => !!state.token,
    getLoginState: state => state.loginState
  },
  mutations: {
    [AUTH_REQUEST]: (state) => {
      state.loginState = 'pending';
    },
    [AUTH_FAIL]: (state) => {
      state.loginState = 'error';
    },
    [AUTH_SUCCESS]: (state, mToken) => {
      state.loginState = '';
      state.token = mToken;
    },
    [AUTH_LOGOUT]: (state) => {
      return new Promise ((resolve, reject) =>{
        state.loginState = '';
        state.token = '';
        localStorage.removeItem(JWT);
        resolve();
        //Catch?
      })
    }
  },
  actions: {
    [AUTH_REQUEST]: ({ commit, dispatch }, uObj) => {
      return new Promise((resolve, reject) => {
        commit(AUTH_REQUEST);
        fetchData(METHOD_POST, '/login',{
            username: uObj.username,
            password: uObj.password
          }).then(function (res) {
          commit(AUTH_SUCCESS,res.headers.authorization);
          localStorage.setItem(JWT,res.headers.authorization);
          axios.defaults.headers.common['Authorization'] = res.headers.authorization;
          dispatch(USER_REQUEST);
          resolve(res.data);
        }).catch(function(err) {
          commit(AUTH_FAIL);
          reject(err);
        })
      })
    },
    [AUTH_LOGOUT]: ({ commit}) => {
      commit(AUTH_LOGOUT);
    }
  }
}

export default storeAuth

अब, अगर निर्यात/आयात अनुभागों में परिवर्तनों को वापस रोल करें, तो सब कुछ काम करता है। तो समस्या को निश्चित रूप से इससे जोड़ा जाना चाहिए।

1
Narktor 19 मार्च 2020, 16:26

2 जवाब

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

आप export का उपयोग कर सकते हैं

export function sendData() {...}

और आप इस तरह आयात कर सकते हैं

import fetchData, { sendData } from '/src/utility/db_handler.js;'
2
iamhuynq 19 मार्च 2020, 16:28

किसी ऑब्जेक्ट में फ़ंक्शन निर्यात करें

export default {
    sendData: sendData,
    fetchData: fetchData
}

फिर उपयोग करने के लिए

import * as DBHandler from '@/src/utility/db_handler'
...
DBHandler.sendData()
0
depperm 19 मार्च 2020, 16:37