Javascript 如何导出多个函数ES6_Javascript_Vue.js_Ecmascript 6_Vuex

Javascript 如何导出多个函数ES6

javascript vue.js ecmascript-6

Javascript 如何导出多个函数ES6,javascript,vue.js,ecmascript-6,vuex,Javascript,Vue.js,Ecmascript 6,Vuex,我在一个vue项目中工作，我对vue非常陌生我们在out/src/utility文件夹中有一个db_handler.js。看起来是这样的： import fakeApiCall from "./mock"; import axios from "axios"; import { DEBUG_MODE, API_ENDPOINT } from "./namespaces"; function fetchData(method, slug, payload) { //axios.defau

我在一个vue项目中工作，我对vue非常陌生

我们在out/src/utility文件夹中有一个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

<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>

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

我需要知道的是：如何导出sendData？到目前为止，他们使用了简短的语法，因为他们只导出了一个函数。如何导出多个函数？我还希望名称保持为fetchData和sendData

编辑：我试着应用Iamhuynq和Bergi的方法，但现在有些事情发生了。我将首先在中导入函数 moduleUser.js和authUser.js，它们位于/src/store/modules中。 authUser.js用于标识用户，因此它当然用于登录屏幕。当我现在尝试登录时，我得到类型错误：objectundefined。我猜这是因为返回服务器响应的函数以某种方式失败或找不到

与此行为相关的代码库是登录屏幕、我已经向您展示的db_处理程序和一个名为moduleAuth.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

<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>

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

现在，如果只是回滚对导出/导入部分的更改，一切都会正常工作。因此，问题肯定与此有关。

您可以使用导出

你可以这样导入

import fetchData, { sendData } from '/src/utility/db_handler.js;'

您可以使用导出

你可以这样导入

import fetchData, { sendData } from '/src/utility/db_handler.js;'

导出对象中的函数

export default {
    sendData: sendData,
    fetchData: fetchData
}

然后使用

import * as DBHandler from '@/src/utility/db_handler'
...
DBHandler.sendData()

导出对象中的函数

export default {
    sendData: sendData,
    fetchData: fetchData
}

然后使用

import * as DBHandler from '@/src/utility/db_handler'
...
DBHandler.sendData()

我的建议是，如果要导出多个函数，应该使用导出方法而不是导出默认值。它将使您的代码更具可读性，并将用于将来的调试

export function function1(params) {
 .......
}

export function function2() {
 ......
}

这里有两种导入函数的方法

通过使用导入{function1，function2}from./exportedFunctionFile确保您使用的函数名与导出的函数名相同！另一种方法是使用*as yourVariableName示例导入*as myFunctions from./exportedFunctionFile这将在导出太多函数时使用。现在，您可以将导入的函数用作myFunctions.function1 如果要使用默认关键字导出，请将函数导出为对象示例导出默认值{function1，function2}，您可以使用它，就像从./exportedFunctionFile导入*作为myFunctions一样，这与第二种导入方式类似

希望它能帮助您

我的建议是，如果您要导出多个函数，您应该使用导出方法而不是导出默认值。它将使您的代码更具可读性，并将用于将来的调试

export function function1(params) {
 .......
}

export function function2() {
 ......
}

这里有两种导入函数的方法

希望它能帮助你

在{}之间发生了什么？是否有任何方法可以使用导出默认{}模式导出它们，同时保留我在OP中描述的名称？您还应该将fetchData设置为命名的export@baryon123不要使用那个导出默认{}模式。@Bergi为什么？它几乎在项目中的任何地方都使用，只需使用导出函数fetchData…{…}和导出函数sendData…{…}一起使用，如本答案所示，并删除默认导出。然后从…导入{fetchData，sendData}，{}之间是什么？是否有任何方法可以使用导出默认{}模式导出它们，同时保留我在OP中描述的名称？您还应该将fetchData设置为命名的export@baryon123不要使用那个导出默认{}模式。@Bergi为什么？它几乎在项目中的任何地方都使用，只需使用导出函数fetchData…{…}和导出函数sendData…{…}一起使用，如本答案所示，并删除默认导出。然后从…导入{fetchData，sendData}。不要使用默认导出，请使用命名导出。不要使用默认导出，请使用命名导出。不要使用默认导出对象文本。如果您想要一个名称空间，请改用命名导出，并将*作为DBHandler from…导入。@Bergi您能解释一下为什么不默认导出对象文本吗？这基本上是一样的，答案是针对一个专门为此提出的问题。它没有讨论这是否是一种不好的做法，或者是否有更好的替代方案。永远不要使用默认的导出对象文本。如果您想要一个名称空间，请改用命名导出，并将*作为DBHandler from…导入。@Bergi您能解释一下为什么不默认导出对象文本吗？这基本上是一样的，答案是针对一个专门为此提出的问题。它没有讨论这是否是一个坏习惯或者是否有更好的替代品。