Vue.js는 오늘날 프런트 엔드 개발에서 가장 인기 있는 JavaScript 프레임워크 중 하나입니다. 그리고 uni-app은 Vue.js를 사용하여 크로스 플랫폼 애플리케이션을 개발하기 위한 프레임워크입니다. Vuex는 Vue.js의 상태 관리 라이브러리이며 uni-app의 데이터 상태 관리에 중요한 부분입니다. 이 기사에서는 uni-app이 Vuex를 사용하여 로그인 기능을 구현하는 방법을 소개하고 이 방법을 통해 더 많은 상태 관리를 달성할 수 있습니다.
uni-app이 Vuex를 사용하여 로그인 기능을 구현하는 방법을 이해하기 전에 다음 관련 기술을 배워야 합니다.
위 기술을 마스터했다면 계속해서 읽을 수 있습니다.
다른 페이지 간 상태 전송을 시작하기 전에 다음 작업을 준비해야 합니다.
HBuilderX에서 프로젝트를 열고 페이지 디렉토리에 Login.vue 파일을 만듭니다. App.vue 파일을 수정하고 해당 내용을 다음과 같이 수정합니다.
<template>
<div>
<router-view />
</div>
</template>
<script>
export default {
onLaunch() {
uni.reLaunch({
url: '/pages/login/login'
})
}
}
</script>uni-app에 uni-request 라이브러리를 설치 및 구성하고 다음과 같이 main.js 파일 상단에 인용합니다.
import uniRequest from 'uni-request';
uniRequest.defaults.baseURL = 'http://localhost:3000/api';
// 请求拦截器
uniRequest.interceptors.request.use((config) => {
const token = uni.getStorageSync('token') || '';
config.headers.Authorization = token;
return config;
});
// 响应拦截器
uniRequest.interceptors.response.use((response) => {
if (response.statusCode === 401) {
uni.removeStorageSync('token');
uni.reLaunch({
url: '/pages/login/login'
});
}
return response.data;
}, (error) => {
return Promise.reject(error);
});uni-request 라이브러리를 사용하면 uni-app에서 HTTP 요청을 더 쉽게 만들 수 있습니다. uni-request 库使我们可以更方便地在 uni-app 中进行 HTTP 请求。
在以上工作完成之后，我们可以开始实现登录功能了。下面是具体的实现方法：
在 Login.vue 文件中编写登录表单，包括一个用户名输入框和一个密码输入框。代码如下：
<template> <view class="container"> <form @submit.prevent="handleSubmit"> <view class="field"> <input type="text" name="username" v-model="form.username" placeholder="请输入用户名" /> </view> <view class="field"> <input type="password" name="password" v-model="form.password" placeholder="请输入密码" /> </view> <view class="field"> <button class="btn" type="submit">登录</button> </view> </form> </view> </template>
在 Login.vue 文件中创建一个 computed，用于检查用户名和密码是否为空，并在 methods 中编写一个 handleSubmit 方法，用于提交登录表单。代码如下：
export default {
data() {
return {
form: {
username: '',
password: ''
}
};
},
computed: {
isFormValid() {
return this.form.username.trim() !== '' && this.form.password.trim() !== '';
}
},
methods: {
async handleSubmit() {
const data = await this.$store.dispatch('login', this.form);
uni.setStorageSync('token', data.token);
uni.reLaunch({
url: '/pages/index/index'
});
}
}
};在 store 目录下创建一个 store.js 文件，并定义一个名为 user 的 Vuex 模块。这个模块包含以下三个部分：
state：状态对象，包含用户信息和 token。getters：计算属性，用于派生新的状态，包括用户名和是否已登录。actions：用于异步操作，包括登录和注销。在 store.js 中定义用于获取和设置当前用户信息的 state，以及用于计算新状态的 getters，代码如下：
const state = {
user: null,
token: null
};
const getters = {
username: (state) => {
return state.user ? state.user.username : '';
},
isLoggedIn: (state) => {
return !!state.token;
}
};在 store.js 中定义一个 mutations，用于更新 state。在这个示例中，我们将更新用户信息和 token。代码如下：
const mutations = {
setUser(state, user) {
state.user = user;
},
setToken(state, token) {
state.token = token;
}
};在 store.js 中定义一个 actions，用于异步调用后端服务器进行用户登录，并更新 state。你可以使用 uni-request 库来进行异步请求。代码如下：
const actions = {
async login({ commit }, { username, password }) {
const { data } = await uniRequest.post('/login', { username, password });
commit('setUser', data.user);
commit('setToken', data.token);
return data;
}
};在 store.js 中创建一个 index.js，用于暴露我们定义好的模块。代码如下：
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
user
}
});
export default store;在这篇文章中，我们学习了在 uni-app 中如何使用 Vuex 实现登录功能。我们还演示了如何使用 uni-request 库进行异步请求，以及如何定义 actions 和 mutations 来更新 state
로그인 기능 구현
🎜위 작업이 완료되면 로그인 기능 구현을 시작할 수 있습니다. 구체적인 구현 방법은 다음과 같습니다. 🎜🎜🎜🎜 Login.vue 파일에 사용자 이름 입력 상자와 비밀번호 입력 상자를 포함하여 로그인 양식을 작성합니다. 코드는 다음과 같습니다. 🎜rrreee🎜🎜🎜 Login.vue 파일에computed를 생성하여 사용자 이름과 비밀번호가 비어 있는지 확인하고 methods에 <code>를 작성합니다. code> >handleSubmit 메소드, 로그인 양식을 제출하는 데 사용됩니다. 코드는 다음과 같습니다. 🎜rrreee🎜🎜🎜store 디렉터리에 store.js 파일을 만들고 user라는 Vuex 모듈을 정의합니다. 이 모듈은 다음 세 부분으로 구성됩니다. 🎜🎜🎜state: 사용자 정보 및 토큰을 포함한 상태 개체입니다. 🎜🎜getters: 사용자 이름 및 로그인 여부를 포함하여 새로운 상태를 파생하는 데 사용되는 계산된 속성입니다. 🎜🎜actions: 로그인 및 로그아웃을 포함한 비동기 작업에 사용됩니다. 🎜🎜🎜🎜🎜 현재 사용자 정보를 가져오고 설정하는 데 사용되는 state와 현재 사용자 정보를 계산하는 데 사용되는 getter를 store.js에서 정의하세요. new state >의 경우 코드는 다음과 같습니다. 🎜rrreee🎜🎜🎜 store.js에서 mutations를 정의하여 state를 업데이트합니다. 이번 예시에서는 사용자 정보와 토큰을 업데이트하겠습니다. 코드는 다음과 같습니다. 🎜rrreee🎜🎜🎜store.js에서 actions를 정의하여 사용자 로그인을 위해 백엔드 서버를 비동기적으로 호출하고 상태를 업데이트합니다. 코드>. uni-request 라이브러리를 사용하여 비동기 요청을 할 수 있습니다. 코드는 다음과 같습니다. 🎜rrreee🎜🎜🎜 store.js에 index.js를 생성하여 우리가 정의한 모듈을 노출합니다. 코드는 다음과 같습니다. 🎜rrreee🎜🎜Summary🎜🎜 이번 글에서는 Vuex를 사용하여 uni-app에서 로그인 기능을 구현하는 방법을 알아보았습니다. 또한 uni-request 라이브러리를 사용하여 비동기 요청을 만드는 방법과 작업 및 변형을 정의하여 상태를 업데이트하는 방법도 시연했습니다. 데이터는 . 🎜🎜Vuex를 사용하면 애플리케이션 상태를 더 쉽게 관리하고 복잡한 애플리케이션을 신속하게 개발하는 데 도움이 될 수 있습니다. uni-app에서 크로스 플랫폼 애플리케이션을 개발할 계획이라면 Vuex 사용법을 익히는 것이 매우 중요합니다. 🎜위 내용은 vuex를 사용하여 uniapp에서 로그인 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
