SyncedStore 开源项目教程

SyncedStore 开源项目教程

SyncedStoreSyncedStore CRDT is an easy-to-use library for building live, collaborative applications that sync automatically.项目地址:https://gitcode.com/gh_mirrors/sy/SyncedStore

项目介绍

SyncedStore 是一个基于 CRDT（Conflict-free Replicated Data Type）技术的 JavaScript 库，旨在简化构建实时协作的分布式 Web 应用程序。它提供了一个易于使用的 API，使得开发多用户或多设备的应用程序变得简单，就像开发常规应用程序一样。SyncedStore 构建在 Yjs 之上，Yjs 是一个经过验证的高性能 CRDT 实现。

项目快速启动

安装

首先，你需要通过 npm 安装 SyncedStore：

npm install @syncedstore/core

初始化

在你的项目中引入并初始化 SyncedStore：

import { syncedStore, getYjsDoc } from "@syncedstore/core";

// 定义你的数据结构
const shape = {
  todos: []
};

// 创建 SyncedStore
const store = syncedStore(shape);

// 添加一个待办事项
store.todos.push({ completed: false, title: "Get groceries" });

// 设置待办事项为已完成
store.todos[0].completed = true;

应用案例和最佳实践

实时协作编辑器

SyncedStore 可以用于创建实时协作编辑器，允许多个用户同时编辑文档。以下是一个简单的示例：

import { syncedStore, getYjsDoc } from "@syncedstore/core";

const shape = {
  text: "text"
};

const store = syncedStore(shape);

// 获取文本对象
const text = store.text;

// 监听文本变化
text.observe(event => {
  console.log("Text changed:", text.toString());
});

// 修改文本
text.insert(0, "Hello, world!");

多设备同步

SyncedStore 支持多设备同步，使得用户在不同设备上的操作能够实时同步。以下是一个示例：

import { syncedStore, getYjsDoc } from "@syncedstore/core";

const shape = {
  notes: []
};

const store = syncedStore(shape);

// 添加笔记
store.notes.push({ title: "Meeting notes", content: "Discuss project progress" });

// 在另一个设备上同步
const doc = getYjsDoc(store);
doc.on("update", update => {
  console.log("Received update from another device:", update);
});

典型生态项目

React 集成

SyncedStore 提供了与 React 集成的示例，使得在 React 应用中使用 SyncedStore 变得简单。以下是一个简单的示例：

import React from "react";
import { useSyncedStore } from "@syncedstore/react";
import { syncedStore } from "@syncedstore/core";

const shape = {
  todos: []
};

const store = syncedStore(shape);

function TodoList() {
  const state = useSyncedStore(store);

  return (
    <ul>
      {state.todos.map((todo, index) => (
        <li key={index}>{todo.title}</li>
      ))}
    </ul>
  );
}

export default TodoList;

Vue 集成

SyncedStore 也提供了与 Vue 集成的示例，使得在 Vue 应用中使用 SyncedStore 变得简单。以下是一个简单的示例：

import { createApp } from "vue";
import { syncedStore } from "@syncedstore/core";
import { useSyncedStore } from "@syncedstore/vue";

const shape = {
  todos: []
};

const store = syncedStore(shape);

const app = createApp({
  setup() {
    const state = useSyncedStore(store);

    return {
      state
    };
  },
  template: `
    <ul>
      <li v-for="(todo, index) in state.todos" :key="index">{{ todo.title }}</li>
    </ul>
  `
});

app.mount("#app");

通过以上示例，你可以看到 SyncedStore 在不同框架中的集成方式，以及如何利用它来构建实时协作的应用程序。

SyncedStoreSyncedStore CRDT is an easy-to-use library for building live, collaborative applications that sync automatically.项目地址:https://gitcode.com/gh_mirrors/sy/SyncedStore