- vừa được xem lúc

[Nuxt 3] Global State là gì và nó có thể thay thế stores không

0 0 26

Người đăng: Tuấn Kiệt

Theo Viblo Asia

Giới thiệu

Liệu bao giờ bạn nghĩ thử dùng global state thay thế cho Stores hay không ?

Mình có 1 ví dụ như sau , mình sẽ tạo 1 composables tiếp tục import ref email vào 2 component và thử thay đổi giá trị của ref từ component A để xem phản ứng của như thế nào

Như bạn có thể thấy thì khi A thực hiện thay đổi thì sẽ có sự thay đổi cho tất cả , vì sao vậy ?

Khái niệm về Global state ?

Đầu tiên chúng ta đọc lại tài liệu composables về State Management with Reactivity API , mình sẽ trích 1 đoạn lưu ý nhỏ ở đây :

Although here we are using a single reactive object as a store, you can also share reactive state created using other Reactivity APIs such as ref() or computed(), or even return global state from a Composable

Ví dụ về phần global và local của 1 composables

import { ref } from 'vue' // global state, created in module scope
const globalCount = ref(1) export function useCount() { // local state, created per-component const localCount = ref(1) return { globalCount, localCount }
}

Nhược điểm

  • Khó để quản lí state global : Nếu bạn tự tin bạn là người quản lí tốt state và sẽ maintain tốt dự án thì mình nghĩ phần này có thể bỏ qua được
  • Mutation strictness : Bị rối loạn state khi mà có nhiều sự thay đổi ở nhiều component cái này bạn có thể né tránh bằng cách bọc readonly cho phần ref tránh vấn đề này
  • Cross-Request State Pollution khi SSR :
  • Không có sự hỗ trợ của Vue DevTools : Thành thực mà nói thì chủ yếu chúng ta khá là ít sử dụng devtools đúng không nào

Như các bạn có thể thấy những nhược điểm trên điều được mình chống chế bằng cách lách qua đó và cố sử dụng , nhìn chẳng tốt gì cả . Thay vào đó hãy sử dụng Pinia vì những nhược điểm này điều được Pinia hỗ trợ tốt 😄 , vậy khi trường hợp nào chúng ta sẽ sử dụng global state

Kết luận :

Chỉ sử dụng global state nếu chức năng đó có độ ảnh hưởng thấp và không mang tính global ở toàn bộ các , mà chỉ 1 số page hoặc component , global state chỉ nên có thuộc tính readonly để tránh trường hợp Mutation strictness

Qua bài viết trên mình mong sẽ giúp bạn hiểu rõ hơn về global state để tránh trường hợp không như ý muốn xảy ra trong tương lai 😄

Bình luận

Bài viết tương tự

- vừa được xem lúc

Uống Pepsi code Vue đi - Uống Cocacola code React nha ;)

. (Nguồn ảnh: Internet). Chào các bạn, chào các bạn. Let's go . 1.

0 0 146

- vừa được xem lúc

Giới thiệu về Mixins trong Vuejs

Xin chào năm mới năm me! Hôm nay mình sẽ tiếp tục chia sẻ cho các bạn những vấn đề liên quan đến Vuejs. Ở bài trước mình đã giới thiệu về tính năng Filter và lần này, mình xin chia sẻ với các bạn về một khái niệm cũng rất quen thuộc.

0 0 394

- vừa được xem lúc

[Vue3] Tích hợp Vue I18n đơn giản, siêu nhẹ cho các dự án Vue3

Tại sao mình quyết định viết một plugin i18n cho dự án mới. . Lightweight. Chỉ có các feature thật sự cần thiết.

0 0 42

- vừa được xem lúc

Xây dựng chức năng quản lý sản phẩm với Vue + Laravel (Phần 2)

Video được đăng tại channel SUNTECH VIỆT NAM

0 0 22

- vừa được xem lúc

Vue Instance Lifecycle

Chào các bạn. 1.

0 0 83

- vừa được xem lúc

10 Vue Tips

Đôi khi để nghiên cứu một ngôn ngữ nào đó chúng ta phải đọc hàng tá trang docs thì mới moi được cái ý mình cần. Dạo này mình cũng lang thang đọc sang chút Vue chen chân nghề nghiệp nên cũng có lượm lặ

0 0 35