我正在从事Vue项目,对Vue还是很陌生。
我们在/ 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
我需要知道的是:
如何导出sendData()
?
到目前为止,他们仅使用了一个简短的语法,因为他们仅导出了一个函数。
如何导出多个功能?我也希望名称保持为“ fetchData”和“ sendData”
编辑:
我尝试应用Iamhuynq和Bergi的方法,但是现在有些问题了。我首先要导入功能
moduleUser.js
中的authUser.js
和/src/store/modules
。
authUser.js
用于标识用户,因此当然在登录屏幕中使用。现在尝试登录时,出现“类型错误:对象未定义”。我猜这是因为返回服务器响应的函数以某种方式失败或找不到。
与此行为相关的代码库是“登录”屏幕,Ive已经向您显示的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
提示动作即将来临,看起来像这样:
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
现在,如果仅将更改回滚到导出/导入部分,则一切正常。因此,问题肯定应该与此相关。
答案 0 :(得分:2)
您可以使用export
export function sendData() {...}
您可以像这样导入
import fetchData, { sendData } from '/src/utility/db_handler.js;'
答案 1 :(得分:2)
我的建议是,如果要导出多个功能,则应使用导出方法,而不要导出默认值。这将使您的代码更具可读性,并将用于以后的调试。
export function function1(params) {
.......
}
export function function2() {
......
}
这里有两种导入函数的方法
import { function1, function2} from "./exportedFunctionFile"
来确保您使用与导出相同的函数名!import * as myFunctions from "./exportedFunctionFile"
,当您导出过多函数时将使用该示例,现在您可以将导入的函数用作myfunctions.function1()
如果要使用默认关键字导出,请以导出功能作为对象示例export default {function1,function2}
,并且可以像import * as myFunctions from "./exportedFunctionFile"
一样使用它,这与第二种导入方式类似。
希望它会为您提供帮助
答案 2 :(得分:0)
将功能导出到对象中
export default {
sendData: sendData,
fetchData: fetchData
}
然后使用
import * as DBHandler from '@/src/utility/db_handler'
...
DBHandler.sendData()