資訊專欄INFORMATION COLUMN
摘要：前言本來只是想寫個實現(xiàn)登錄退出的例子的，但是又覺得這樣干貨太少。哈哈，不小心被嚇到了吧，其實這些都是有辦法可以解決的，下次有機(jī)會，我們可以再討論一下使用的正確姿勢。
前言
本來只是想寫個Vuet實現(xiàn)登錄退出的例子的，但是又覺得這樣干貨太少。一個好的開源項目，少不了單元測試和e2e測試，為了保證Vuet教程的豐富性和程序的穩(wěn)定性，所以我選擇了寫的例子即能當(dāng)教程使用，也可以用于測試，豐富的應(yīng)用場景和測試，能保證日后的版本迭代不會因為修復(fù)了一個bug而引發(fā)了一大堆bug的尷尬。
源碼地址例子源碼
測試源碼
git clone https://github.com/medevicex/vuet.git npm install npm run dev npm run dev:test # 運行測試，需要電腦本地安裝firefox和chrome瀏覽器開始
哈哈，上面直接拋源碼地址，感覺也是挺尷尬的，我們先分析一下我們這個登錄退出所需要所的功能
登錄頁面，用戶信息頁面，是兩個不同的頁面，就涉及到了多組件狀態(tài)共享
我期望用戶在已登錄的情況下，每次到用戶信息頁面時，先渲染本地的用戶信息，然后再去請求服務(wù)器更新本地的用戶信息
將登錄退出的方法，集中起來管理，方面在在各個組件中調(diào)用
多組件共享狀態(tài)和方法Vuet提供了全局的mapModules方法，可以讓我們連接到掛載在Vue實例上的Vuet實例
ages/Home.vue
import { mapRules, mapModules } from "vuet"
export default {
mixins: [
// manual：規(guī)則，可以將通用的更新模塊狀態(tài)的方法集中起來，
// 可以理解成vuex中的action，只不過他是可以允許在里面更改模塊狀態(tài)的
// need 規(guī)則，會在組件每一次的beforeCreate鉤子中，發(fā)送請求更新一次用戶的信息
mapRules({ manual: "user", need: "user" }),
// 連接用戶模塊
mapModules({ user: "user" })
]
}
定義一個user模塊
vuet/user.js
export default {
data () {
// 一個Object對象中，是否有data方法，是構(gòu)成Vuet.js一個模塊的依據(jù)
// 當(dāng)你調(diào)用reset方法時，將會重置整個模塊的狀態(tài)
// 例如在組件中：this.$vuet.reset("模塊名稱")
return {
name: null,
age: null,
sex: null,
count: 0
}
},
async fetch ({ state }) {
// 當(dāng)need規(guī)則觸發(fā)更新時，出調(diào)用一次fetch方法更新
// 我們可以在這里直接更改state，也可以return一個Object對象來更新狀態(tài)
// 在實際項目中，用戶未登錄時，我們并不需要向服務(wù)器發(fā)送真正的請求
// 所以我們可以判斷一下用戶的名稱是否存在，否則的話不向服務(wù)器進(jìn)行真正的請求
if (state.name === null) return
// 下面數(shù)據(jù)因為是模擬的，所以就直接return好了
return {
name: "Vuet",
age: 18,
sex: "male",
count: ++state.count
}
},
// 注：你要在組件中使用manual規(guī)則才能向組件注入這些方法
// 例如：mapRules({ manual: "模塊名稱" })
// 調(diào)用：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 () {
// 用戶選擇退出后，直接調(diào)用reset的方法即可重置用戶信息
this.reset()
}
}
}
實現(xiàn)用戶登錄
pages/Signin.vue
總結(jié){{ msg }}
其實教程并沒有寫得特別詳細(xì)的過程，主要是為了體現(xiàn)出Vuet一種開放的姿態(tài)，它可以在任意組件直接對模塊的狀態(tài)進(jìn)行直接的賦值更新，也可以使用類似action的方法進(jìn)行更新，它可以讓你為所欲為，用得好的人可以讓你開發(fā)的效率飆升，用得不好，也會導(dǎo)致你程序中的狀態(tài)難以追蹤變化的記錄。哈哈，不小心被嚇到了吧，其實這些都是有辦法可以解決的，下次有機(jī)會，我們可以再討論一下使用Vuet的正確姿勢。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/87079.html
摘要：這是基于進(jìn)行狀態(tài)管理的完整項目，包含了用戶的登錄退出，路由頁面，滾動位置還原，帖子編輯狀態(tài)保存等等，麻雀雖小，卻是五臟俱全。 前言 上一篇《Vue.js輕松實現(xiàn)頁面后退時，還原滾動位置》只是簡單的實現(xiàn)了路由切換時進(jìn)行的滾動位置還原，很多朋友就來問上拉加載怎么實現(xiàn)??！于是我想起了以前做過一個叫vue-cnode的項目，于是花了兩天時間進(jìn)行了重構(gòu)，完全的移除了Vuex，使用了Vuet來做為...
摘要：前端日報點關(guān)注，不迷路精選前端團(tuán)隊工作流遷移記譯新語法私有屬性知乎專欄前端每周清單大前端技術(shù)生命周期模型發(fā)布面向生產(chǎn)環(huán)境的前端性能優(yōu)化模塊實現(xiàn)入門淺析知乎專欄中文一個線下沙龍中國最大的前端技術(shù)社區(qū)單頁面博客從前端到后端基于 2017-06-13 前端日報 點關(guān)注，不迷路:-P 精選 ESLint v4.0.0 released - ESLint - Pluggable JavaScri...
摘要：單元測試前端的單元測試目前有兩個比較熱的框架，一個是的方式，一個是。小伙伴們不用急，關(guān)于單元測試這塊，我會找時間寫博客的。首先前端的測試分為兩種，一個是單元測試，另一個就是測試了。? ? ? ? 因為公司項目要用vue框架，所以會用vue-cli來新建項目。用過vue的都知道，要全局安裝vue以及腳手架vue-cli，然后執(zhí)行vue init webpack projectname來新建vu...
摘要：打開瀏覽器輸入，會看到構(gòu)建的項目的主頁目錄結(jié)構(gòu)使用編輯器打開推薦使用，下面具體看看目錄結(jié)構(gòu)在中，根據(jù)我們在構(gòu)建項目的時候的選項，有以下幾個命令。 構(gòu)建一個 vue 項目最簡單的方式就是使用腳手架工具 vue-cli 。前端的三大框架都有自己的腳手架工具，其作用就是用配置好的模板迅速搭建起一個項目工程來，省去自己配置 webpack 配置文件的基本內(nèi)容，大大降低了初學(xué)者構(gòu)建項目的難度。這...
摘要：它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。安裝和使用在之后的實踐過程中講解。有一套良好的代碼規(guī)范，對于項目的開發(fā)和維護(hù)都很友好。 努力了，不一定能成功，但是不努力，感覺好舒服啊 ——努訓(xùn) 沒有了解過vue1.*，直接上手vue2.0；雖然有些吃力但還是很愉快了學(xué)下來了。 一丶環(huán)境配置 node.js...
閱讀 4192·2021-11-24 09:38
閱讀 1601·2021-11-19 09:40
閱讀 2911·2021-11-18 10:02
閱讀 3789·2021-11-09 09:46
閱讀 1911·2021-09-22 15:27
閱讀 3186·2019-08-29 15:24
閱讀 1085·2019-08-29 12:40
閱讀 1782·2019-08-28 18:24
