随着前端技术的不断发展，vue框架已经成为了一种非常流行的前端框架。在使用vue框架的过程中我们常常需要对vuex进行管理，revue2 npm 包就是为了解决这个问题而开发的。本文将详细介绍 revue2 npm 包的安装和使用，以及如何在项目中使用它去更好地进行项目管理。
安装
在项目中使用 revue2 需要先进行安装，在命令行中输入以下命令：
npm install revue2 --save
使用
在项目中使用 revue2 对于vuex的状态管理更加方便。首先需要在代码中引入 revue2，然后定义一个对象，包含 state、getters、mutations 和 actions 四个属性，分别对应vuex中的四个模块，再通过创建一个 store 对象并导出它，就可以在项目中使用 revue2 了。
示例代码：
-- -------------------- ---- -------
------ - ------------- - ---- --------
----- ------- - ---------------
------ -
------ -
--
-------- -
--------------- -
------ -----------
-
--
---------- -
--------------------- -
-------------
-
--
-------- -
----- --------------------- ------ -- -
----- --- --------------- -- ------------------- ------
------------------------
-
-
--
------ ------- -------在项目中使用 MyStore 对象中定义的相关方法：
-- -------------------- ---- -------
----------
-----
---------- -- -------------------- -------
------- --------------------------------- --------------
------
-----------
--------
------ ------- ---- -----------
------ ------- -
-------- -
---------------- -
----------------------------
-
--
--------- -
----------- - --- ---------
-
-
---------这里通过在 created 生命周期中创建一个 MyStore 对象并将其赋值给 $store 实例来启用 revue2，在template中就能根据需要轻松调用 store 中定义的方法。
深度剖析
revue2 是在 vuex 基础上进行开发的一款使用更加便捷的状态管理工具，以下是其使用方法的详细说明：
1. createSandbox
createSandbox 是 revue2 提供的一个专门用于创建 store 的方法，可以根据 store 对象的 state、getters、mutations 和 actions 四个属性来创建一个 store。
示例代码：
-- -------------------- ---- -------
------ - ------------- - ---- --------
----- ------- - ---------------
------ -
------ -
--
-------- -
--------------- -
------ -----------
-
--
---------- -
--------------------- -
-------------
-
--
-------- -
----- --------------------- ------ -- -
----- --- --------------- -- ------------------- ------
------------------------
-
-
--此处通过 state 定义了一个 count 属性，默认值为 0，通过 getters 定义了 getCount 方法，可以用来获取 count 的值，mutations 中定义了 incrementCount 方法用于对 count 的值进行自增，actions 中通过 async 声明了 asyncIncrementCount 方法，用于异步执行自增操作。
2. state
state 属性中定义了 store 的数据源，是一个普通的 JavaScript 对象。在项目中可以通过获取 state 属性中的数据值来进一步操作数据。
示例代码：
import { createSandbox } from 'revue2'
const MyStore = createSandbox({
state: {
count: 0
}
})此处通过 state 定义了一个 count 的属性，默认值为 0。
3. getters
getters 可以看作是 store 的计算属性，具备了类似 Vue 中计算属性的特性，可以根据 state 中的值去进行相关操作得出新的值。
示例代码：
-- -------------------- ---- -------
------ - ------------- - ---- --------
----- ------- - ---------------
------ -
------ -
--
-------- -
--------------- -
------ -----------
-
-
--此处定义了一个 getCount 方法，并返回 state 中的 count 值。
4. mutations
mutations 用来改变 state 中的值，是 store 中的唯一修改数据的工具。mutations 中定义了一些可以改变 state 中数据的方法，被定义的方法会接收它要改变的 state 属性作为参数。
示例代码：
-- -------------------- ---- -------
------ - ------------- - ---- --------
----- ------- - ---------------
------ -
------ -
--
---------- -
--------------------- -
-------------
-
-
--此处定义了一个 incrementCount 方法，用于将 state 中的 count 属性值增加 1。
5. actions
actions 在某些情况下可以方便地对 mutations 进行封装，actions 定义了 store 中的触发事件，通过异步方式去触发 mutations 中的方法，从而改变了 state 中的数据。
示例代码：
-- -------------------- ---- -------
------ - ------------- - ---- --------
----- ------- - ---------------
------ -
------ -
--
---------- -
--------------------- -
-------------
-
--
-------- -
----- --------------------- ------ -- -
----- --- --------------- -- ------------------- ------
------------------------
-
-
--此处定义了一个 asyncIncrementCount 方法，异步执行，并在执行之后调用 mutations 中定义的 incrementCount 方法。
总结
通过学习，我们已经能够更加深入的了解并使用 revue2，这个优秀的状态管理工具，通过它能够更加灵活方便地进行 vuex 相关的状态管理，在 vue 项目中更加高效的完成数据的处理和状态管理。
代码示例： https://codesandbox.io/s/we6eb?file=/src/App.vue:86-158
参考文档：https://www.npmjs.com/package/revue2
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609981e8991b448ded1c