Vuejs data flow – tam chủng thần khí cần biết

Bài viết được sự cho phép của tác giả Kiên Nguyễn

DEV: Thưa bụt, con đang học Vuejs, bụt biết Vuejs data flow không?

BỤT: Tao là thần chứ có phải “đi ven lốp bờ” như m đâu. Biết thế đ** nào được!

DEV: Nhưng mà con muốn học, muốn trở thành dev lương 3k

BỤT: Ta không giúp được, nhưng có 3 món bảo vật (gọi là tam chủng thần khí) có thể giúp con. Nhớ học và thực hành nhuần nhuyễn từng loại thì kiểu gì cũng có người yêu (nhầm, lương cao).

Tìm việc làm VueJS lương cao cho bạn

1. Props và emit

1.1 Ai cũng nên dùng

Một Vuejs Application tất nhiên sẽ chia ra làm nhiều component. Component cha, component con. Trường hợp số lượng component không quá nhiều Emit và Props là hai món bảo vật nên biết cách để sử dụng:

• Dễ hiểu, dễ sử dụng
• Khuyến khích sử dụng cho các component quan hệ cha – con (parent – child)
• Không nên sử dụng khi Application có quan hệ rối rắm
• Bắt buộc phải biết sử dụng khi học Vuejs

Trong Vuejs, data flow dễ nắm bắt nhất giữa các component là emit và props. Props sử dụng để pass data giữa các component khác nhau. Trong khi đó emit được dùng để gửi các event (có thể kèm data) từ component con lên component cha.

1.2 Mục sở thị bảo vật

Props và Emit trong Vuejs data flow có thể được hiện thực hóa như sau:

// Component account nhận vào props username
// Do nhận prop nên chỗ này in ra 2000$
<template>
<div id='salary-info'>
{{salary}}
</div>
</template>

<script>
export default {
props: ['salary']
}
</script>

// Component cha gửi qua prop user name
// Chỗ dấu : được hiểu là gửi props
<template>
<div>
<salary-info :salary="user.salary" />
</div>
</template>

<script>
import SalaryInfo from "@/components/SalaryInfo.vue";

export default {
components: {
SalaryInfo
},
data() {
return {
user: {
salary: '2000$'
}
}
}
}
</script>

Đấy, nhẹ nhàng dễ dàng như đẩy xe hàng dưới 500kg

2. EventBus

2.1 Lợi hại không kém

Nhắc tới EventBus thì chỉ cần nhớ trong đầu cái slogan bất tử “From Anywhere to Anywhere”. Gửi tới đâu cũng được.

Sử dụng: Chỉ khi có nhiều hơn 15,20 component với flow phức tạp. Quan hệ parent child phức tạp. Nghe tên thôi là đủ biết bảo bối này cũng khá mạnh.

Nếu cần emit bất cứ sự kiện nào từ component con của parent 1 đến child component của parent 100 vẫn có thể dùng EventBus. Không quá khó để nhớ và hiểu cách sử dụng, EventBus như tuyến Bus nhanh BRT đi khắp Hà Nội, chuyên chở event tới tất cả các component.

Tuy nhiên, thực tế trong quá trình làm việc mình thấy có hai lưu ý nhỏ như sau:

• Chỉ sử dụng khi các event gửi từ child đến parent lớn hơn 4 cấp. (Emit lúc đó sẽ gây rối rắm)
• Khuyến khích sử dụng khi Component tree không quá 5 cấp (Nếu số lượng component không lớn – Vuex khó hiểu, rối source)

2.2 Mục sở thị bảo vật

EventBus trong Vuejs data flow có thể được hiện thực hóa như sau:

// Eventbus.js
// Đăng kí sử dụng eventbus
import Vue from 'vue';
export const EventBus = new Vue();

// Component cha gửi qua prop user name
<template>
<div class="pleeease-click-me" @click="emitGlobalClickEvent()"></div>
</template>

<script>
// Import the EventBus we just created.
import { EventBus } from './event-bus.js';

export default {
data() {
return {
clickCount: 0
}
},

methods: {
emitGlobalClickEvent() {
this.clickCount++;
// Send the event on a channel (i-got-clicked) with a payload (the click count.)
// Sử dụng ở đây, arg1 là name, 2 là value
EventBus.$emit('i-got-clicked', this.clickCount);
}
}
}
</script>
}
</script>

// Ở chỗ js khác thì lấy về, không có gì khác
import { EventBus } from './event-bus.js';

// Listen for the i-got-clicked event and its payload.
// Bắt sự kiện on listen
EventBus.$on('i-got-clicked', clickCount => {
console.log(`Oh, that's nice. It's gotten ${clickCount} clicks! :)`)
});

Chi tiết hơn về sử dụng EventBus có thể xem thêm ở Digital Ocean – Creating a Global Event Bus with Vue.js

3. Vuex

3.1 Thật sự quyền năng

Nhắc tới Vuex cũng chỉ cần nhớ tới 3 chữ “Our state manager“. Vuex là nơi chứa tất cả state của một application.

Nói “Quyền năng” bởi vì Vuex như là kho chứa tổng, chứa tất cả các state của các component. Ngoài “Quyền năng”, Vuex còn được support tận răng với Vue dev tools extension. Xem mọi thứ đang diễn ra trong kho chứa như thế nào?

3.2 Mục sở thị bảo vật

Vuex trong Vuejs data flow có thể được hiện thực hóa như sau:

Lời khuyên là đối với các application phức tạp. Việc cập nhật state của các component diễn ra liên tục thì nên sử dụng Vuex.

// Đăng kí store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
// Lưu state biến count, initial là 0
state: {
count: 0
},
// Lúc nào state thay đổi
mutations: {
increment (state) {
state.count++
}
}
})

// Store không phải muốn đụng là đụng
// Phải commit các kiểu hẳn hoi
store.commit('increment')
// Lưu vào rồi thì cứ this.store là lấy ra thôi
console.log(store.state.count) // -> 1

Một khi ứng dụng trở nên phức tạp với nhiều commponent. Sử dụng emit sẽ khiến component trở nên rối rắm, khó quản lý. Việc truyền dữ liệu giữa các component lại càng khó khăn hơn. Props trở nên quá tải, không thể theo dõi.

Tuy nhiên, với bảo vật thứ ba này, chỉ với mutations, mapGetter, mapActions, việc cập nhật state và data vào component đã trở nên đơn giản hơn nhiều.

• Cập nhật state và data ở bất cứ đâu
• Truy xuất value từ store dễ dàng với mapGetter
• Đồng bộ hóa dữ liệu xuyên suốt trong flow của application

4. Nên sử dụng cái nào trong Vuejs data flow?

Không có bảo vật nào được ưu tiên cao nhất sử dụng trong Vuejs Data flow. Thật sự mỗi bảo vật có một sức mạnh riêng. Có thể chứng tỏ bản thân trong từng tình huống cụ thể.

Yêu cầu chung là phải nắm rõ tường tận các cách này. Một số lưu ý khi sử dụng đúc kết ra như sau:

4.1 Props và emit

• Sử dụng tốt trong quan hệ trực tiếp giữa parent và child component
• Không sử dụng được cho các component không có relationship
• Vue Application không quá phức tạp, không có nhiều component

4.2 Eventbus

• Như một chuyến xe bus, chuyên chở khắp nơi
• Sử dụng cho application lớn hơn một cấp
• Nếu có xử lý active, notification giữa các component không có relation và cách xa, có thể sử dụng

4.2 Vuex

• Sử dụng cho các application từ medium cho tới large.
• Nếu phức tạp và có sử dụng value từ API -> nên sử dụng.
• Kết hợp tốt giữa mutations và actions cho ra kết quả hoàn hảo

5. Tham khảo

• Biết dataflow mà không biết life cycle hook thì quả là thiếu sót lớn rồi. Múc ngay tại đây.
• Vuejs Data flow – Vuex – từ trang chủ Vue
• Vuex Guide

Hết rồi. Cảm ơn anh em đã đọc bài. Nhớ like và share Facebook page nha!

Bài viết gốc được đăng tải tại kieblog.vn

Có thể bạn quan tâm:

• Những Vuejs concept bắt buộc phải nắm vững – Phần 1
• Top 3 Vuejs Library không thể không biết
• Data scientist vs data analyst: những khác biệt mà bạn cần biết

Xem thêm Việc làm Developer hấp dẫn trên TopDev