什么是 vue-simpleddp？
vue-simpleddp 是一个基于 Vue.js 和 DDP 协议的实时数据通讯 npm 包。它可以让你在 Vue.js 应用中非常方便地使用 DDP 协议，实现实时数据通讯。
安装 vue-simpleddp
在开始使用 vue-simpleddp 之前，你需要先安装它。通过以下命令在项目中安装 vue-simpleddp：
npm install vue-simpleddp --save
使用 vue-simpleddp
导入 vue-simpleddp
在你的 Vue.js 应用中，你需要在组件的 script 标签中导入 vue-simpleddp。首先，在你的 main.js 中全局导入 vue-simpleddp：
import VueSimpleDDP from 'vue-simpleddp';
Vue.use(VueSimpleDDP, {
endpoint: 'ws://example.com/websocket',
});创建 DDP 客户端
接下来，你需要创建一个 DDP 客户端，并与服务器建立连接。你可以在 Vue 组件的 created 生命周期中创建客户端，并在 destroyed 生命周期中断开连接：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
------------ ---
--
--
--------- -
------------------------
----- ------------
--------------- --------------
-------------- -----
------------- ---
---
--------------------
--
----------- -
-----------------------
--
--在上面的代码中，我们创建了一个名为 my-client 的 DDP 客户端，并通过 collectionName 选项指定了它默认要处理的集合。autoReconnect 选项表示客户端将会在连接中断时自动尝试重新连接。observeQuery 选项表示客户端将会监听数据库的所有数据变化。
订阅数据
一旦与服务器建立了连接，你就可以订阅需要的数据。你可以在 Vue 组件内使用 $ddp.subscribe() 方法来订阅一个或多个数据集：
-- -------------------- ---- -------
------ ------- -
--------- -
------------------------
-- ---
---
--------------------
-- ----
---------------------
----- --------
-------- ---
-------- ---
-------- -- -- -
--------------------
--
------- -- -- -
---------------------
--
-------- ----------- ---- -- -
---------------------- -----
--
---
--
--在上面的代码中，我们订阅了名为 todos 的数据集，并提供了 onReady、onStop 和 onEvent 回调函数。onReady 回调函数会在数据加载完成后被调用，onStop 回调函数会在订阅被取消后调用，onEvent 回调函数会在数据集中的文档发生变化时调用。
取消订阅数据
当你不再需要某个数据集时，你可以使用 $ddp.unsubscribe() 方法取消订阅。同时，你也无需在组件销毁时手动取消订阅，因为 vue-simpleddp 会自动在组件销毁时取消所有订阅。
export default {
methods: {
unsubscribe() {
this.$ddp.unsubscribe('todos');
},
},
};改变数据
你可以使用 $ddp.call() 方法改变数据。$ddp.call() 方法接收一个方法名和一组参数，并在服务器上执行该方法：
-- -------------------- ---- -------
------ ------- -
-------- -
--------- -
------------------------- ---- ------ ----- ------- -- -
-- ----- -
------------------- -----
- ---- -
------------------- --------
-
---
--
--
--在上面的代码中，我们调用了名为 addTodo 的方法，并传入了一个字符串参数。
示例代码
下面是一个使用 vue-simpleddp 的完整示例代码：
-- -------------------- ---- -------
----------
-----
----
--- ----------- -- ------ ----------------
-- ---------- --
-----
-----
------- -------------------- -------------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
--
--
--------- -
------------------------
----- ------------
--------------- --------
-------------- -----
------------- ---
---
--------------------
-- ----
---------------------
----- --------
-------- ---
-------- ---
-------- -- -- -
--------------------
--
------- -- -- -
---------------------
--
-------- ----------- ---- -- -
-- ---------- --- -------- -
---------------------
- ---- -- ---------- --- ---------- -
----- ----- - --------------------------- -- -------- --- ---------
------------------------ -- -----
- ---- -- ---------- --- ---------- -
----- ----- - --------------------------- -- -------- --- ---------
------------------------ ---
-
--
---
--
-------- -
--------- -
------------------------- ---- ------ ----- ------- -- -
-- ----- -
------------------- -----
- ---- -
------------------- --------
-
---
--
--
----------- -
-----------------------
--
--
---------在上面的代码中，我们订阅了名为 todos 的数据集，并在 onEvent 回调函数中处理了数据集中的文档变化。同时，我们也提供了一个添加 todo 的方法，该方法会调用名为 addTodo 的方法，以向数据库中添加新的 todo。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5251ab1864dac668e8