uniapp怎么用vuex实现登录功能-uni-app-PHP中文网

前置知识

准备工作

实现登录功能

总结

首页

web前端

uni-app

uniapp怎么用vuex实现登录功能

PHPz

Apr 20, 2023 pm 01:55 PM

Vue.js 是当下前端开发中最流行的 JavaScript 框架之一。而 uni-app 是一个使用 Vue.js 开发跨平台应用的框架。Vuex 是 Vue.js 的状态管理库，是 uni-app 中数据状态管理的重要组成部分。在本文中，我们将会介绍 uni-app 如何使用 Vuex 实现登录功能，并且可以通过此方法实现更多的状态管理。

前置知识

在了解 uni-app 如何使用 Vuex 实现登录功能之前，需要学习以下相关技术：

HTML 和 CSS 基础
Vue.js 基础知识
uni-app 基础知识
Vuex 基础知识

如果你已经掌握以上技术，可以继续阅读。

准备工作

在开始不同页面之间的状态传递之前，我们需要准备以下工作：

在 uni-app 中创建一个新项目并使用 Vuex。可以使用 HBuilderX 等工具来创建 uni-app 项目，并且选择默认集成 Vuex。

在 HBuilderX 中打开项目并且在 pages 目录下创建一个 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 请求。

实现登录功能

在以上工作完成之后，我们可以开始实现登录功能了。下面是具体的实现方法：

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

登录后复制