🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Chào mừng đến với Cafedev! Hôm nay, chúng ta sẽ cùng nhau khám phá về chủ đề Pinia Vuejs với Tổ Hợp Các Store. Trong quá trình phát triển ứng dụng Vue.js, việc tổ hợp các store là một phần quan trọng giúp chúng ta quản lý dữ liệu và logic một cách hiệu quả. Cafedev sẽ hướng dẫn bạn cách sử dụng và kết hợp các store trong Vue Router một cách linh hoạt và hiệu quả nhất. Hãy cùng bắt đầu khám phá ngay bây giờ!

Tổ hợp các store liên quan đến việc sử dụng các store mà sử dụng lẫn nhau, và điều này được hỗ trợ trong Pinia. Có một quy tắc cần tuân theo:
Nếu hai hoặc nhiều store sử dụng lẫn nhau, chúng không thể tạo ra một vòng lặp vô hạn thông qua getters hoặc actions. Chúng không thể đọc trực tiếp trạng thái của nhau trong hàm setup của chúng:

const useX = defineStore('x', () => {
  const y = useY()

  // ❌ This is not possible because y also tries to read x.name
  y.name

  function doSomething() {
    // ✅ Read y properties in computed or actions
    const yName = y.name
    // ...
  }

  return {
    name: ref('I am X'),
  }
})

const useY = defineStore('y', () => {
  const x = useX()

  // ❌ This is not possible because x also tries to read y.name
  x.name

  function doSomething() {
    // ✅ Read x properties in computed or actions
    const xName = x.name
    // ...
  }

  return {
    name: ref('I am Y'),
  }
})

1. Các Store Lồng Ghép

Lưu ý rằng nếu một store sử dụng một store khác, bạn có thể trực tiếp import và gọi hàm useStore() bên trong actions và getters. Sau đó, bạn có thể tương tác với store giống như bạn sẽ làm từ bên trong một Vue component. Xem Các Getters Chia Sẻ và Các Actions Chia Sẻ.
Khi đến với các store setup, bạn có thể đơn giản sử dụng một trong các store ở đầu của hàm store:

import { useUserStore } from './user'

export const useCartStore = defineStore('cart', () => {
  const user = useUserStore()
  const list = ref([])

  const summary = computed(() => {
    return `Hi ${user.name}, you have ${list.value.length} items in your cart. It costs ${price.value}.`
  })

  function purchase() {
    return apiPurchase(user.id, this.list)
  }

  return { summary, purchase }
})

2. Các Getters Chia Sẻ

Bạn có thể đơn giản gọi useOtherStore() bên trong một getter:

import { defineStore } from 'pinia'
import { useUserStore } from './user'

export const useCartStore = defineStore('cart', {
  getters: {
    summary(state) {
      const user = useUserStore()

      return `Hi ${user.name}, you have ${state.list.length} items in your cart. It costs ${state.price}.`
    },
  },
})

3. Các Actions Chia Sẻ

Điều tương tự áp dụng cho actions:

import { defineStore } from 'pinia'
import { useUserStore } from './user'

export const useCartStore = defineStore('cart', {
  actions: {
    async orderCart() {
      const user = useUserStore()

      try {
        await apiOrderCart(user.token, this.items)
        // another action
        this.emptyCart()
      } catch (err) {
        displayError(err)
      }
    },
  },
})

Vì actions có thể là bất đồng bộ, hãy đảm bảo tất cả các cuộc gọi useStore() xuất hiện trước bất kỳ await nào. Nếu không, điều này có thể dẫn đến việc sử dụng phiên bản pinia sai trong các ứng dụng SSR:

{7-8,11-13}
import { defineStore } from 'pinia'
import { useUserStore } from './user'

export const useCartStore = defineStore('cart', {
  actions: {
    async orderCart() {
      // ✅ call at the top of the action before any `await`
      const user = useUserStore()

      try {
        await apiOrderCart(user.token, this.items)
        // ❌ called after an `await` statement
        const otherStore = useOtherStore()
        // another action
        this.emptyCart()
      } catch (err) {
        displayError(err)
      }
    },
  },
})

Cảm ơn bạn đã đồng hành cùng Cafedev trong hành trình khám phá về Pinia Vuejs với Tổ Hợp Các Store. Chúng ta đã cùng nhau tìm hiểu về cách kết hợp các store trong Vue Pinia để quản lý dữ liệu và logic một cách thông minh và linh hoạt. Hy vọng rằng những kiến thức và kinh nghiệm mà chúng ta đã chia sẻ đã giúp bạn hiểu rõ hơn về chủ đề này. Đừng quên tiếp tục theo dõi các bài viết mới nhất trên Cafedev để cập nhật thông tin và kiến thức công nghệ hàng ngày. Hẹn gặp lại trong những bài viết tiếp theo của chúng tôi!

Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao

Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM