資訊專欄INFORMATION COLUMN
摘要：而的狀態(tài)測(cè)試更類似于單元測(cè)試，和組件的依賴較低，組件只會(huì)存在調(diào)用模塊的方法或者讀取狀態(tài)，在組件頻繁的改動(dòng)中，而的改動(dòng)相對(duì)會(huì)較小，所以狀態(tài)測(cè)試便會(huì)存在一定的價(jià)值。
父子組件通信
Vuet提供了模塊化的狀態(tài)管理，通過(guò)對(duì)一個(gè)組件的注入，再向其子組件進(jìn)行分發(fā)，使得我們可以在任何一個(gè)子組件，通過(guò)模塊的方法對(duì)當(dāng)前模塊的狀態(tài)進(jìn)行更新，再由和vuet連接的父組件對(duì)子組件進(jìn)行單向數(shù)據(jù)流動(dòng)。這樣我們就可以輕易的解決了父子組件的通信問(wèn)題，也使得狀態(tài)測(cè)試變得異常簡(jiǎn)單。
狀態(tài)測(cè)試
import test from "ava"
// 假設(shè)這是我們應(yīng)用程序的代碼 start
import Vue from "vue"
import Vuet from "vuet"
Vue.use(Vuet)
const vuet = new Vuet({
modules: {
test: {
data() {
return {
count: 0
}
},
plus() {
this.count++
},
delay() {
return new Promise((resolve, reject) => {
setTimeout(() => {
this.count = 1000
resolve()
}, 100)
})
}
}
}
})
new Vue({
vuet
})
// 假設(shè)這是我們應(yīng)用程序的代碼 end
// 接下來(lái)我們可以寫(xiě)vuet的狀態(tài)測(cè)試
test("test", async t => {
const vtm = vuet.getModule("test")
t.is(vtm.count, 0)
vtm.plus()
t.is(vtm.count, 1)
await vtm.delay()
t.is(vtm.count, 1000)
})
上面是一個(gè)簡(jiǎn)單的狀態(tài)測(cè)試的例子，在實(shí)際項(xiàng)目中，還應(yīng)該包含很多http請(qǐng)求，我們可以使用axios模塊來(lái)和服務(wù)器進(jìn)行交互，好處就是它也支持在node環(huán)境中運(yùn)行，這樣我們編寫(xiě)http請(qǐng)求相關(guān)的狀態(tài)測(cè)試變成了可能。在如今版本快遞迭代的大環(huán)境中，寫(xiě)測(cè)試幾乎變成了一種很稀罕的事情，前端的測(cè)試更是少之又少。往往一個(gè)頁(yè)面中，又拆分成很多子組件，這使得測(cè)試的工作量成指數(shù)級(jí)增長(zhǎng)，面臨著需求的頻繁改動(dòng)而無(wú)能為力。而Vuet的狀態(tài)測(cè)試更類似于單元測(cè)試，和組件的依賴較低，組件只會(huì)存在調(diào)用Vuet模塊的方法或者讀取狀態(tài)，在組件頻繁的改動(dòng)中，而Vuet的改動(dòng)相對(duì)會(huì)較小，所以狀態(tài)測(cè)試便會(huì)存在一定的價(jià)值。
規(guī)則在生活中，我們每天都會(huì)進(jìn)行著一些重復(fù)的工作，比如每天起床之后都會(huì)刷牙、洗臉、吃早餐，這些重復(fù)而單調(diào)的工作，在Vuet中則可以教給規(guī)則來(lái)處理。
比如：
頁(yè)面url發(fā)生改變，重新請(qǐng)求一下數(shù)據(jù)，
模塊的狀態(tài)發(fā)生變化時(shí)，使用 localStorage做持久化處理，
組件初始化時(shí)，請(qǐng)求一下數(shù)據(jù)，
組件銷毀時(shí)，重置一下?tīng)顟B(tài)，
每隔一段時(shí)間，幫我請(qǐng)求一下數(shù)據(jù)，
等等......
我們可以將這些簡(jiǎn)單重復(fù)的工作，封裝成一個(gè)規(guī)則，然后可以使用這個(gè)規(guī)則去更新模塊的狀態(tài)
export default {
rule ({ path }) {
return {
destroyed () {
this.$vuet.getModule(path).reset()
}
}
}
}
上面是一個(gè)非常簡(jiǎn)單的例子，它的工作就是在組件銷毀時(shí)，重置模塊的狀態(tài)，以節(jié)省內(nèi)存的占用。如果需要，我們還可以優(yōu)化這個(gè)規(guī)則，在組件初始化時(shí)從localStorage中還原狀態(tài)，在組件銷毀時(shí)使用localStorage存儲(chǔ)狀態(tài)，然后在重置狀態(tài)。
總結(jié)Vuet可以很好的解決了Vue.js中組件通信的問(wèn)題，而且合理的運(yùn)用規(guī)則，可以讓我們事半功倍。
Vuet官網(wǎng)：傳送門
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87392.html
摘要：前端日?qǐng)?bào)精選移動(dòng)首屏秒開(kāi)優(yōu)化方案探討常見(jiàn)布局方式編碼規(guī)范阿里前端推出新的框架譯中文第期使用的功能周刊基礎(chǔ)系列零之大轉(zhuǎn)盤九宮格刮刮卡抽獎(jiǎng)插件封裝掘金技術(shù)周刊期知乎專欄與交互之技術(shù)掘金性能調(diào)優(yōu)之代碼篇二錯(cuò)誤棧知乎專欄進(jìn)階篇 2017-08-21 前端日?qǐng)?bào) 精選 移動(dòng) H5 首屏秒開(kāi)優(yōu)化方案探討CSS 常見(jiàn)布局方式HTML/CSS/JS編碼規(guī)范阿里前端推出新的 React 框架：Mirror...
摘要：前言本來(lái)只是想寫(xiě)個(gè)實(shí)現(xiàn)登錄退出的例子的，但是又覺(jué)得這樣干貨太少。哈哈，不小心被嚇到了吧，其實(shí)這些都是有辦法可以解決的，下次有機(jī)會(huì)，我們可以再討論一下使用的正確姿勢(shì)。 前言 本來(lái)只是想寫(xiě)個(gè)Vuet實(shí)現(xiàn)登錄退出的例子的，但是又覺(jué)得這樣干貨太少。一個(gè)好的開(kāi)源項(xiàng)目，少不了單元測(cè)試和e2e測(cè)試，為了保證Vuet教程的豐富性和程序的穩(wěn)定性，所以我選擇了寫(xiě)的例子即能當(dāng)教程使用，也可以用于測(cè)試，豐富的...
摘要：前言從發(fā)布之后，陸陸續(xù)續(xù)做了七八個(gè)項(xiàng)目，摸索出來(lái)了一套自己的狀態(tài)管理模式，我將之稱為。其實(shí)自帶的規(guī)則能夠支持同時(shí)記錄全局滾動(dòng)條自身的滾動(dòng)條，這樣就能大大的提升了我們的用戶體驗(yàn)例子源碼官方 前言 從Vue.js 2.x發(fā)布之后，陸陸續(xù)續(xù)做了七八個(gè)項(xiàng)目，摸索出來(lái)了一套自己的狀態(tài)管理模式，我將之稱為Vuet。它以規(guī)則來(lái)驅(qū)動(dòng)狀態(tài)更新，它帶來(lái)的是開(kāi)發(fā)效率上的飆升，它就像草原，而你是野馬，任你隨意...
摘要：這是基于進(jìn)行狀態(tài)管理的完整項(xiàng)目，包含了用戶的登錄退出，路由頁(yè)面，滾動(dòng)位置還原，帖子編輯狀態(tài)保存等等，麻雀雖小，卻是五臟俱全。 前言 上一篇《Vue.js輕松實(shí)現(xiàn)頁(yè)面后退時(shí)，還原滾動(dòng)位置》只是簡(jiǎn)單的實(shí)現(xiàn)了路由切換時(shí)進(jìn)行的滾動(dòng)位置還原，很多朋友就來(lái)問(wèn)上拉加載怎么實(shí)現(xiàn)啊！于是我想起了以前做過(guò)一個(gè)叫vue-cnode的項(xiàng)目，于是花了兩天時(shí)間進(jìn)行了重構(gòu)，完全的移除了Vuex，使用了Vuet來(lái)做為...
閱讀 3389·2023-04-26 01:40
閱讀 3093·2021-11-24 09:39
閱讀 1402·2021-10-27 14:19
閱讀 2648·2021-10-12 10:11
閱讀 1307·2021-09-26 09:47
閱讀 1847·2021-09-22 15:21
閱讀 2711·2021-09-06 15:00
閱讀 894·2021-08-10 09:44
