Svelte #7: Stores

Trong Svelte, store là một cách để quản lý và chia sẻ trạng thái (state) của ứng dụng của bạn giữa các thành phần khác nhau mà không cần sử dụng các thư viện quản lý trạng thái bên ngoài. Có hai loại store chính trong Svelte: Writable và Readable.

Writable stores

writable() là một hàm dùng để tạo ra một store có thể ghi được. Ví dụ:

<script>
  import { writable } from 'svelte/store';
  
  const count = writable(0); // Tạo một store có thể ghi được với giá trị khởi tạo là 0
  
  // Để cập nhật giá trị trong store:
  count.set(5); // Gán giá trị mới cho store
  
  count.update(currentValue => currentValue + 1); // Cập nhật giá trị của store dựa trên giá trị hiện tại
  
  const unsubscribe = count.subscribe(value => {
      console.log('Giá trị mới của store:', value);
  }); //đăng ký (subscribe) để theo dõi sự thay đổi của store. Khi giá trị của store thay đổi, hàm subscriber sẽ được gọi.
  
  //khi bạn gọi method subscribe nó sẽ trả về 1 function unsubscribe
  unsubscribe(); //hủy đăng ký
  
  $count //sử dụng giá trị của store trong component
</script>

Svelte

Readable stores

readable() là một hàm để tạo ra một store chỉ có thể đọc. Ví dụ:

<script>
  import { readable } from 'svelte/store';

  const temperature = readable(25); // Tạo một store chỉ có thể đọc với giá trị khởi tạo là 25
  
  // Để đọc giá trị từ store:
  const currentTemp = $temperature; // Sử dụng $ để đọc giá trị từ store
</script>

Svelte

Derived stores

Derived stores trong Svelte là các stores mới được tạo ra từ các stores đã tồn tại, thông qua việc ánh xạ (map), lọc (filter), kết hợp (combine), hoặc thậm chí là sắp xếp lại cách cấu trúc dữ liệu.

Việc tạo derived stores giúp bạn tạo ra các stores phụ thuộc vào các giá trị từ các stores gốc, làm cho việc quản lý trạng thái và dữ liệu trở nên linh hoạt và tiện lợi hơn.

Svelte cung cấp một số phương thức để tạo derived stores:

derived(dependencies, callback, initial_value): Phương thức này cho phép bạn tạo ra một derived store dựa trên các store gốc (dependencies). Callback được cung cấp sẽ được gọi mỗi khi một trong các store gốc thay đổi. Ví dụ:

<script>
  import { writable, derived } from 'svelte/store';

  const baseStore = writable(0);
  
  const derivedStore = derived(
      [baseStore],
      ([$baseStore]) => {
          // Xử lý các store gốc và trả về giá trị cho derived store
          return $baseStore * 2;
      },
      0 // Giá trị khởi tạo của derived store
  );
</script>

Svelte

export const derived = (source, fn, initial_value): Từ Svelte version 3.38.2 trở đi, bạn có thể sử dụng export const derived để tạo derived store trực tiếp trong một file store riêng. Ví dụ:

// Trong một file store.js
import { writable, derived } from 'svelte/store';

export const baseStore = writable(0);

export const derivedStore = derived(
    baseStore,
    ($baseStore) => {
        // Xử lý các store gốc và trả về giá trị cho derived store
        return $baseStore * 2;
    },
    0 // Giá trị khởi tạo của derived store
);

Svelte

Trong file khác, bạn có thể sử dụng derived store đã xuất:

import { derivedStore } from './store.js';

// Sử dụng derived store trong component
$derivedStore; // Giá trị của derived store

Svelte

Custom stores

Trong Svelte, bạn có thể tạo ra các custom store để quản lý trạng thái của ứng dụng của mình một cách linh hoạt và tuỳ chỉnh. Các custom store này có thể được tạo ra dựa trên các nhu cầu cụ thể của bạn.

Để tạo một custom store trong Svelte, bạn có thể sử dụng các hàm cơ bản như writable() hoặc readable() để tạo store mới, sau đó xây dựng các phương thức hoặc hành vi tùy chỉnh theo nhu cầu của bạn. Dưới đây là một ví dụ về cách tạo một custom store.

Ví dụ, bạn muốn tạo một custom store để quản lý thông tin người dùng, gồm tên và email:

import { writable } from 'svelte/store';

// Tạo một custom store với thông tin người dùng
function createUserStore() {
    const { subscribe, set, update } = writable({
        name: '',
        email: ''
    });

    return {
        subscribe,
        setName: (name) => update(user => ({ ...user, name })),
        setEmail: (email) => update(user => ({ ...user, email })),
        reset: () => set({ name: '', email: '' })
    };
}

// Tạo một instance của custom store
export const userStore = createUserStore();

Svelte

Trong ví dụ này, createUserStore() tạo ra một custom store có các phương thức như setName, setEmail và reset để quản lý thông tin người dùng. Sau đó, bạn có thể sử dụng userStore trong ứng dụng của mình như một store thông thường.

Để sử dụng custom store này trong các components khác:

import { userStore } from './userStore.js';

// Đọc dữ liệu từ custom store
const unsubscribe = userStore.subscribe(user => {
    console.log('Thông tin người dùng:', user);
});

// Cập nhật thông tin người dùng thông qua các phương thức của custom store
userStore.setName('John Doe');
userStore.setEmail('[email protected]');

// Khi không cần theo dõi nữa, hủy đăng ký
unsubscribe();

Svelte

Store binding

Store binding trong Svelte là một cách để kết nối trực tiếp giữa một store và một phần tử DOM hoặc một thuộc tính của một phần tử DOM. Khi giá trị của store thay đổi, các phần tử hoặc thuộc tính liên quan sẽ được cập nhật tự động mà không cần phải thực hiện các bước xử lý thêm.

Có hai loại store binding chính trong Svelte:

Binding với phần tử DOM: Bạn có thể liên kết một store với một thuộc tính của phần tử DOM, chẳng hạn như textContent, value, checked, v.v.

Ví dụ, binding giá trị của một store với thuộc tính textContent của một phần tử:

<script>
    import { writable } from 'svelte/store';
    const message = writable('Hello!');
</script>

<p>{$message}</p>

Svelte

Trong ví dụ này, {$message} kết nối giá trị của store message với nội dung của phần tử <p>. Khi giá trị của store message thay đổi, nội dung của phần tử <p> sẽ được cập nhật tự động.

Binding với thuộc tính của phần tử DOM: Bạn cũng có thể liên kết trực tiếp giữa một store và một thuộc tính cụ thể của một phần tử DOM.

Ví dụ, binding giá trị của một store với thuộc tính value của một input:

<script>
    import { writable } from 'svelte/store';
    const name = writable('');
</script>

<input type="text" bind:value={$name} />

Svelte

Trong ví dụ này, bind:value={$name} kết nối giá trị của store name với thuộc tính value của input. Khi giá trị của store name thay đổi, giá trị của input sẽ được cập nhật và ngược lại.

By tuongazby

Related Post