什么是 vuex-service
vuex-service 是一个基于 Vuex 搭建的状态管理库。与 Vuex 不同的是，vuex-service 提供了更简便的使用方式，以便于快速开发实现业务逻辑。
安装
你可以通过 npm 或 yarn 安装 vuex-service：
npm install vuex-service # 或者 yarn add vuex-service
快速使用
首先需要在你的应用中先配置 vuex，可以参考 Vuex 的官方文档。
接下来，我们需要创建一个新的 service
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ----------- ------- ------- -
----------------- -
-- ------
-
-
------ ------- --- -------------具体的业务逻辑可以在 setUserName 方法中实现。
接着，我们将 service 注册到 Vuex 的 store 中
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
------ ----------- ---- ---------------
-------------
----- ----- - --- ------------
------ ---
---------- ---
-------- ---
-------- -
------------ ---------------------------- ----------- ---- --
-
--
------ ------- -----最后，在组件中使用 service
-- -------------------- ---- -------
----------
-----
------ ------------------ --
------- --------------------------------
------
-----------
--------
------ - -------- - ---- ------
------ ----------- ---- ---------------
------ ------- -
------ -
------ -
--------- --
-
--
--------- -
-------------
--------- ----- -- --------------------------
--
--
-------- -
------------- -
--------------------------------------
-
-
-
---------这样，我们就完成了一个最简单的 vuex-service 的使用。
深入学习
基本使用
创建 service
在 vuex-service 中创建一个 service 相当于创建一个 Vuex 的模块。我们需要先创建一个新的服务，继承自 Service 类。
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ----------- ------- ------- -
----------------- -
-- ------
-
-
------ ------- --- -------------在服务中定义的方法，与 Vuex 中定义方法的方式相同。这些都会变成 store 的 mutation 或 action。
需要注意，我们并没有像定义 Vuex 模块一样注册 store。这是因为我们的 service 已经自动完成了这一步。
向 state 中添加数据
如果需要添加一些数据到 state 中，可以通过服务的 state 属性直接访问：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ----------- ------- ------- -
----- - -
--------- --
-
----------------- -
------------------- - ----
-
-
------ ------- --- -------------需要注意，这样定义的数据是会被添加到 store 的 state 中的。
调用其他服务
使用 Vuex 提供的 mapGetters、mapActions 等可以方便的调用其他模块的数据或方法。
在 vuex-service 中，也可以通过 this.prev 进行调用。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ ------------ ---- ----------------
----- ----------- ------- ------- -
---------------------- -
----- ----- - -----------------------------------
-------------------------
-
-
------ ------- --- -------------模块化命名空间
在 vuex-service 中，默认使用了模块化命名空间。我们可以这样访问 state
-- -------------------- ---- -------
----- ----------- ------- ------- -
----- - -
--------- --
-
----------------- -
------------------- - ----
-
-实际上，对应的 state 的属性名是 userService.userName。
当我们注册模块时，可以自己指定命名空间。
-- -------------------- ---- -------
------ ----------- ---- ---------------
----- ----- - --- ------------
------ ---
---------- ---
-------- ---
-------- -
--------- ---------------------------- ----------- ---- --
-
--这样，我们在使用的时候，需要这样引用：
this.$store.state.myModule.userName
进阶使用
构造选项
在 Vuex 中，我们可以通过构造选项（如 actions，mutations 等）的方式来修改 store 的行为。vuex-service 也提供类似的构造选项。
-- -------------------- ---- -------
----- ----------- ------- ------- -
-------
------ ----------------- -
------ -
------ -
--------- ---
---- -
-
-
-
-
------ ------- --- -------------这样，就可以直接定义 state，而不用再去定义构造函数。其他的构造选项，都适用于相同的方式。
mixin
有时候，我们在多个服务中，需要实现相同的代码。这时候，我们可以通过 mixin 实现代码的复用：
-- -------------------- ---- -------
------ - -------- ----------- - ---- --------------
----- ------------- - -
---------- -
------------ ----- ------
-
-
----- ----------- ------- ------- -
-------
-
------ ------- ------------------------------ --------------通过这种方式，我们就可以直接在服务中进行复用。
插件
在 Vuex 中，我们可以通过插件扩展 Vuex 的功能。vuex-service 也提供了类似的插件机制。
插件是一个函数，它会接受一个 store 作为参数，在里面可以执行任何 Vuex 操作。
-- -------------------- ---- -------
----- -------- - ----- -- -
------------------------ -- -
----------------------- ---------
--
-
----- ----- - --- ------------
-------
-------- ----------
--除此之外，插件还可以接受一个 service 作为参数：
const MyPlugin = userService => {
console.log(userService)
}
UserService.registerPlugin(MyPlugin)总结
本文介绍了 vuex-service 的使用方法，可以帮助我们在快速开发实现业务逻辑的过程中，提升工作效率。同时，也希望读者能够通过本文的深入学习章节，更加深入地理解 vuex-service 中的一些实现细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005709d81e8991b448e7f23