Cara menggunakan vuex untuk melaksanakan fungsi log masuk dalam uniapp

Vue.js ialah salah satu rangka kerja JavaScript yang paling popular dalam pembangunan bahagian hadapan hari ini. Dan uni-app ialah rangka kerja untuk membangunkan aplikasi merentas platform menggunakan Vue.js. Vuex ialah perpustakaan pengurusan negeri Vue.js dan bahagian penting dalam pengurusan keadaan data dalam apl uni. Dalam artikel ini, kami akan memperkenalkan cara aplikasi uni menggunakan Vuex untuk melaksanakan fungsi log masuk, dan boleh mencapai lebih banyak pengurusan keadaan melalui kaedah ini.

Pengetahuan prasyarat

Sebelum memahami cara uni-app menggunakan Vuex untuk melaksanakan fungsi log masuk, anda perlu mempelajari teknologi berkaitan berikut:

• Asas HTML dan CSS
• Pengetahuan asas Vue.js
• Pengetahuan asas uni-app
• Pengetahuan asas Vuex

Jika anda telah menguasai teknologi di atas , anda boleh teruskan membaca.

Kerja penyediaan

Sebelum memulakan pemindahan keadaan antara halaman yang berbeza, kita perlu menyediakan kerja berikut:

1. Buat projek baharu dalam apl uni dan Gunakan Vuex. Anda boleh menggunakan alatan seperti HBuilderX untuk mencipta projek uni-app dan memilih untuk menyepadukan Vuex secara lalai.

2. Buka projek dalam HBuilderX dan buat fail Login.vue dalam direktori halaman. Ubah suai fail App.vue dan ubah suai kandungannya seperti berikut:

   <template>
     <div>
       <router-view />
     </div>
   </template>
   
   <script>
   export default {
     onLaunch() {
       uni.reLaunch({
         url: '/pages/login/login'
       })
     }
   }
   </script>

3. Pasang dan konfigurasikan perpustakaan permintaan-satu dalam apl uni, dan sebutkan ia di bahagian atas utama Fail .js seperti berikut: Pustaka

   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 memudahkan kami membuat permintaan HTTP dalam apl uni.

Melaksanakan fungsi log masuk

Selepas kerja di atas selesai, kita boleh mula melaksanakan fungsi log masuk. Berikut ialah kaedah pelaksanaan khusus:

1. Tulis borang log masuk dalam fail Login.vue, termasuk kotak input nama pengguna dan kotak input kata laluan. Kodnya adalah seperti berikut:

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

2. Buat computed dalam fail Login.vue untuk menyemak sama ada nama pengguna dan kata laluan kosong, dan tulis methods > Kaedah untuk menghantar borang log masuk. Kodnya adalah seperti berikut: 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'
         });
       }
     }
   };

3. Buat fail

   dalam direktori kedai dan tentukan modul Vuex bernama store.js. Modul ini mengandungi tiga bahagian berikut: user

   • : nyatakan objek, termasuk maklumat pengguna dan token. state
   • : Sifat dikira, digunakan untuk memperoleh status baharu, termasuk nama pengguna dan sama ada log masuk. getters
   • : digunakan untuk operasi tak segerak, termasuk log masuk dan log keluar. actions
4. Dalam

   tentukan store.js untuk mendapatkan dan menetapkan maklumat pengguna semasa dan state untuk mengira status baharu, kodnya adalah seperti berikut: getters

   const state = {
     user: null,
     token: null
   };
   
   const getters = {
     username: (state) => {
       return state.user ? state.user.username : '';
     },
     isLoggedIn: (state) => {
       return !!state.token;
     }
   };

5. mentakrifkan

   dalam store.js untuk mengemas kini mutations. Dalam contoh ini, kami akan mengemas kini maklumat dan token pengguna. Kodnya adalah seperti berikut: state

   const mutations = {
     setUser(state, user) {
       state.user = user;
     },
     setToken(state, token) {
       state.token = token;
     }
   };

6. Tentukan

   dalam store.js untuk memanggil pelayan bahagian belakang secara tak segerak untuk log masuk dan kemas kini pengguna actions. Anda boleh menggunakan pustaka state untuk membuat permintaan tak segerak. Kodnya adalah seperti berikut: 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;
     }
   };

7. Buat

   dalam store.js untuk mendedahkan modul yang kami takrifkan. Kodnya adalah seperti berikut: 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;

Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan Vuex untuk melaksanakan fungsi log masuk dalam apl uni. Kami juga menunjukkan cara menggunakan pustaka

untuk membuat permintaan tak segerak dan cara mentakrifkan uni-request dan actions untuk mengemas kini data dalam mutations. state

Menggunakan Vuex boleh memudahkan kami mengurus keadaan aplikasi kami dan membantu kami membangunkan aplikasi yang kompleks dengan cepat. Jika anda bercadang untuk membangunkan aplikasi merentas platform dalam apl uni, adalah sangat penting untuk menguasai penggunaan Vuex.

Atas ialah kandungan terperinci Cara menggunakan vuex untuk melaksanakan fungsi log masuk dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!