Vue.js實現用戶登陸退出和e2e測試

前言

原本只是想寫個Vuet實現登陸退出的例子的，可是又以爲這樣乾貨太少。一個好的開源項目，少不了單元測試和e2e測試，爲了保證Vuet教程的豐富性和程序的穩定性，因此我選擇了寫的例子即能當教程使用，也能夠用於測試，豐富的應用場景和測試，能保證往後的版本迭代不會由於修復了一個bug而引起了一大堆bug的尷尬。

源碼地址

例子源碼
測試源碼

運行Vuet項目

git clone https://github.com/medevicex/vuet.git
npm install
npm run dev
npm run dev:test # 運行測試，須要電腦本地安裝firefox和chrome瀏覽器

開始

哈哈，上面直接拋源碼地址，感受也是挺尷尬的，咱們先分析一下咱們這個登陸退出所須要所的功能

• 登陸頁面，用戶信息頁面，是兩個不一樣的頁面，就涉及到了多組件狀態共享

• 我指望用戶在已登陸的狀況下，每次到用戶信息頁面時，先渲染本地的用戶信息，而後再去請求服務器更新本地的用戶信息

• 將登陸退出的方法，集中起來管理，方面在在各個組件中調用

多組件共享狀態和方法

Vuet提供了全局的mapModules方法，可讓咱們鏈接到掛載在Vue實例上的Vuet實例

• ages/Home.vue

import { mapRules, mapModules } from 'vuet'

  export default {
    mixins: [
      // manual：規則，能夠將通用的更新模塊狀態的方法集中起來，
      //        能夠理解成vuex中的action，只不過他是能夠容許在裏面更改模塊狀態的
      // need 規則，會在組件每一次的beforeCreate鉤子中，發送請求更新一次用戶的信息
      mapRules({ manual: 'user', need: 'user' }),
      // 鏈接用戶模塊
      mapModules({ user: 'user' })
    ]
  }

定義一個user模塊

• vuet/user.js

export default {
  data () {
    // 一個Object對象中，是否有data方法，是構成Vuet.js一個模塊的依據
    // 當你調用reset方法時，將會重置整個模塊的狀態
    // 例如在組件中：this.$vuet.reset('模塊名稱')
    return {
      name: null,
      age: null,
      sex: null,
      count: 0
    }
  },
  async fetch ({ state }) {
    // 當need規則觸發更新時，出調用一次fetch方法更新
    // 咱們能夠在這裏直接更改state，也能夠return一個Object對象來更新狀態

    // 在實際項目中，用戶未登陸時，咱們並不須要向服務器發送真正的請求
    // 因此咱們能夠判斷一下用戶的名稱是否存在，不然的話不向服務器進行真正的請求
    if (state.name === null) return
    
    // 下面數據由於是模擬的，因此就直接return好了
    return {
      name: 'Vuet',
      age: 18,
      sex: 'male',
      count: ++state.count
    }
  },
  // 注：你要在組件中使用manual規則才能向組件注入這些方法
  // 例如：mapRules({ manual: '模塊名稱' }) 
  // 調用：this.$模塊名稱.xxx()
  manuals: {
    async signin ({ state }, from) { // 定義了一個登陸的方法
      if (from.name === 'Vuet' && from.pass === '2017') {
        return {
          success: true,
          msg: 'Login was successful',
          data: {
            name: 'Vuet',
            age: 18,
            sex: 'male',
            count: ++state.count
          }
        }
      }
      return {
        success: false,
        msg: 'Logon failure',
        data: null
      }
    },
    async sigout () {
      // 用戶選擇退出後，直接調用reset的方法便可重置用戶信息
      this.reset()
    }
  }
}

實現用戶登陸

• pages/Signin.vue

<template>
  <div class="inner">
    <b class="msg" style="color:red" v-if="msg">{{ msg }}</b>
    <form @submit.prevent="submit">
      <div>
        <label>User name:<input class="name" type="text" v-model="form.name"></label>
      </div>
      <div>
        <label>Password:<input class="pass" type="password" v-model="form.pass"></label>
      </div>
      <button>Signin</button>
    </form>
  </div>
</template>
<script>
  import { mapRules, mapModules } from 'vuet'

  export default {
    mixins: [
      // 使用manual規則取得user模塊裏面manuals的方法
      mapRules({ manual: 'user' }),
      // 鏈接用戶的模塊信息
      mapModules({ user: 'user' })
    ],
    data () {
      return {
        msg: null,
        form: {
          name: null,
          pass: null
        }
      }
    },
    methods: {
      async submit () {
        const res = await this.$user.signin(this.form)
        this.msg = res.msg
        if (res.success) {
          // 登陸成功後，直接賦值更新用戶信息
          this.user = res.data
          setTimeout(() => {
            this.$router.replace({ name: 'home' })
          }, 500)
        }
      }
    }
  }
</script>
<style scoped>
</style>

總結

其實教程並無寫得特別詳細的過程，主要是爲了體現出Vuet一種開放的姿態，它能夠在任意組件直接對模塊的狀態進行直接的賦值更新，也可使用相似action的方法進行更新，它可讓你隨心所欲，用得好的人可讓你開發的效率飆升，用得很差，也會致使你程序中的狀態難以追蹤變化的記錄。哈哈，不當心被嚇到了吧，其實這些都是有辦法能夠解決的，下次有機會，咱們能夠再討論一下使用Vuet的正確姿式。