在 Vue.js 中，有时候我们需要在组件之间传递数据，但是这些组件没有共同的祖先组件。这时候最简单和方便的方式就是使用一个全局对象进行数据交换。但是这种方式会导致全局状态污染，并且不利于代码的维护和测试。因此，我介绍一款用于 Vue.js 的 npm 包 vue-getset，它能够帮助我们快速地在任意两个组件之间进行数据交换，避免了全局状态污染的问题。
安装
npm install --save vue-getset
使用
vue-getset 提供了 get 和 set 方法。
set 方法可以在任意一个组件中设置一个数据并通知所有监听此数据的组件更新视图。
get 方法可以在任意一个组件中获取一个数据并监听此数据，如果被监听的数据发生了改变，则视图也随之发生改变。
在组件 A 中设置一个数据
-- -------------------- ---- -------
------ - --- - ---- ------------
------ ------- -
-------- -
------ -- -
---------- ------ ---- ---
-
-
-在组件 A 中，我们可以使用 set 方法来设置一个名为 msg 的数据，并赋初值 'Hello from A'。这个数据可以在任意一个组件中被访问和监听。
在组件 B 中获取一个数据
-- -------------------- ---- -------
------ - --- - ---- ------------
------ ------- -
---- -- -
------ -
---- --
-
--
------- -- -
---------- ----- -- -
-------- - ---
--
-
-在组件 B 中，我们可以使用 get 方法来获取在组件 A 中设置的 msg 数据。这个数据的值将在初始化时被获取，并被传入回调函数中。回调函数中可以做任意视图修改的操作。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
----------
-----
------------ ------
------- ------------------- --------------
----
------------ ------
----- --- ------
------
-----------
--------
------ - ---- --- - ---- ------------
------ ------- -
---- -- -
------ -
---- --
-
--
-------- -
------ -- -
---------- ------ ---- ---
-
--
------- -- -
---------- ----- -- -
-------- - ---
--
-
-
---------在这个例子中，我们创建了两个组件 A 和 B。组件 A 中有一个按钮可以设置一条名为 msg 的消息。组件 B 中能显示这个消息的内容。在 A 中设置 msg 后，组件 B 就会自动刷新，并显示新的消息内容。
指导意义
vue-getset 虽然只提供了 get 和 set 两个方法，但它在 Vue.js 中的应用场景非常广泛。它可以方便地实现组件之间的通信，避免全局状态污染。并且由于 vue-getset 是一个 npm 包，所以它也能更好地配合其他第三方组件库使用。
希望本文能够对你学习和使用 vue-getset 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f79238a385564ab697c