686
社区成员




在 Vue 3 中,全局变量指的是可以在整个应用程序中访问的变量。与局部变量不同,全局变量不必依赖于组件层次结构或父子关系,而是存储在某个全局作用域中。在我们开发的项目中,当需要不同组件和页面同时共享一个数据的状态时,我们会用到全局变量,本博客将会介绍如何通过vue3项目开发中定义以及使用全局变量。
在开发项目时,我需要实现一个全局变量apikey,使得其他页面和组件可以读取和使用该值,以下是具体的过程
创建store.ts文件,并引入createStore函数,具体代码如下:
import { reactive } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';
interface State {
apiKey: string | null;
}
export const useStore = () => {
const state = reactive<State>({
apiKey: localStorage.getItem('apiKey') || null,//验证本地是否存储了apiKey,若没有,则apiKey初值为空
});
const setApiKey = async (apiKey: string) => { //修改apiKey,并向后端发送请求,返回成功消息后,才能完成修改
try{
const response = await axios.post(`/v1/chat/apikey`,{apiKey});
state.apiKey = apiKey;
localStorage.setItem('apiKey',apiKey);
if(response.status === 200){
ElMessage({
type: 'success',
message: 'API key has been set successfully',
});
}
}
catch(error)//返回失败信息后,前端弹窗提示
{
ElMessage(
{
type:'error',
message:'Unable to set API key',
}
)
}
};
return { state, setApiKey };
};
import { useStore } from '../components/store'//引入全局变量apiKey
<template>
<el-button text @click="open" round style="background-color: bisque;" :disabled="isLoading">{{ buttonText }}</el-button>
<el-dialog v-model="dialogVisible" title="Enter License Key" >
<el-form :model="form" >
<el-form-item prop="key">
<el-input v-model="computedValue" placeholder="Please enter your license key" @input="inputHandler"></el-input>
</el-form-item>
</el-form>
<div>
<el-select style="width: 100%; padding-top: 30px; padding-bottom: 30px" v-model="selectedModel" placeholder="Select ChatGPT model">
<el-option label="GPT-3.5-TURBO(Default ChatGPT)" value="gpt3.5" />
<el-option label="GPT-4(Limited Beta)" value="gpt4.0" />
</el-select>
</div>
<div >
<el-button @click="close">Cancel</el-button>
<el-button style="width:10%;" @click="submit" :loading="isLoading">ok</el-button>
</div>
</el-dialog>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useRouter } from 'vue-router';
import { ref, computed } from 'vue';
import { useStore } from '../components/store'//引入全局变量apiKey
const store = useStore()//接收useStore
const apiKey = computed(() => store.state.apiKey) // 计算属性获取apiKey
const router = useRouter();
const dialogVisible = ref(false);
const form = ref({
key: '',
});
const isLoading = ref(false);
const buttonText = ref('Enter License Key');
const selectedModel = ref('');
const open = () => {
if (apiKey.value) {
router.push('/v1/chat');
console.log(apiKey.value)
} else {
dialogVisible.value = true;
}
};
const close = () => {
dialogVisible.value = false;
form.value.key = '';
computedValue.value = '';
};
const submit = async () => {
if(!selectedModel.value)
{
ElMessage(
{
type:'error',
message:'Please select a ChatGPT model',
}
)
}else if (form.value.key === '') {
ElMessage({
type: 'error',
message: 'Please input your key',
});
} else if (form.value.key.substring(0, 2) !== 'sk') {
ElMessage({
type: 'error',
message: 'Invalid Input! ApiKey should start with "sk".',
});
} else {
isLoading.value = true;
buttonText.value = 'Loading...';
try {
const response = await axios.post(`/v1/chat/apikey`, { key: form.value.key });//这里要根据具体api链接进行修改
if (response.status === 200) {
store.setApiKey(form.value.key); // 在Vuex store中存储apiKey
router.push(`/v1/chat/`);
dialogVisible.value = false;
ElMessage({
type: 'success',
message: 'API key has been submitted successfully',
});
} else {
ElMessage({
type: 'error',
message: 'Unauthorized: Invalid Key',
});
}
} catch (err:any) {
ElMessage({
type: 'error',
message: `Failed to submit: ${err.message}`,
});
} finally {
isLoading.value = false;
buttonText.value = 'Enter License Key';
}
}
};
const computedValue = computed<string>({
get() {
return form.value.key;
},
set(value:string) {
form.value.key = value;
},
}) as { value: string };
// 只允许输入字母和数字
const inputHandler = (event: Event) => {
const input = event.target as HTMLInputElement;
input.value = input.value.replace(/[^a-zA-Z0-9]/g, '');
computedValue.value = input.value;
};
</script>
store.setApiKey(form.value.key); // 在Vuex store中存储apiKey