MobX 是一个简单、可扩展、高性能的状态管理库，它提供了一种更简单的方式来管理和更新应用程序的状态。在 Vue 中使用 MobX 也是一种不错的选择，可以让我们更好地控制应用程序的状态，并且更轻松地管理复杂的数据逻辑。本文将介绍如何在 Vue 中使用 MobX（2.x 版本）及配合 Webpack 打包，希望能够对前端开发者有所帮助。
安装 MobX
在使用 MobX 前，我们需要先安装它。我们可以使用 npm 安装 MobX，并将其保存到 package.json 中：
npm install mobx --save
同时安装 MobX 与 Vue 配合使用的插件 mobx-vue：
npm install mobx-vue --save
使用 MobX
在 Vue 中使用 MobX 需要进行以下几个步骤：
- 创建一个 store，用于保存和管理应用程序的状态。
- 使用 Vue 的插件 mobx-vue，来将 store 与 Vue 组件相连。
- 在组件中使用 store 中的状态。
创建一个 store
在使用 MobX 前，我们需要先定义一个 store，用于管理应用程序的状态。我们可以定义 store 为一个类，并使用装饰器来标记 store 的属性：
-- -------------------- ---- -------
------ - ----------- ------ - ---- ------
------ ------- ----- ------------ -
----------- ----- - -
-------
----------- -
------------
-
-------
----------- -
------------
-
-在上述代码中，我们定义了一个 CounterStore，它具有一个 count 属性，并提供了两个方法来修改 count 属性。
使用 Vue 插件 mobx-vue
在创建好 store 之后，我们需要使用 Vue 的插件 mobx-vue 来将 store 与 Vue 组件相连。我们可以在 main.js 中引入 mobx-vue，并使用 Vue.use() 安装 mobx-vue 插件：
import Vue from 'vue'
import { createDecorator } from 'vue-class-component'
import { observable } from 'mobx'
import { observer } from 'mobx-vue'
Vue.use(observer)在上述代码中，我们使用 createDecorator 创建了一个装饰器，将 observable 和 store 一起使用。
在组件中使用 store
在将 store 与 Vue 组件相连后，我们可以在 Vue 组件中使用 store 中的状态了。例如，我们可以在组件中使用 @inject 装饰器来将 store 中的状态注入到组件：
-- -------------------- ---- -------
------ - ---------- ---- ------ - ---- ------------------------
------ ------------ ---- ----------------------
----------
------ ------- ----- ------- ------- --- -
--------------------- -------------- ------------
--- ------- -
------ -----------------------
-
-在上述代码中，我们使用 @Inject 装饰器将 CounterStore 注入到了组件中，并可以通过 count 属性来获取 CounterStore 中的 count 值。
配合 Webpack 打包
在以上步骤完成后，我们就可以使用 MobX 来管理 Vue 应用程序的状态了。但是在实际开发中，我们需要使用 Webpack 来打包我们的应用程序，并且需要对 MobX 进行一些配置。下面是具体步骤：
- 配置 webpack.config.js 文件
- 配合 babel-plugin-transform-decorators-legacy 插件使用 MobX 装饰器
配置 webpack.config.js 文件
在配置 Webpack 时，我们需要安装 @babel/plugin-proposal-decorators 和 @babel/plugin-syntax-decorators 两个 babel 插件，并将它们配置到 .babelrc 文件中：
npm install @babel/plugin-proposal-decorators @babel/plugin-syntax-decorators --save-dev
// .babelrc
{
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-syntax-decorators", { "legacy": true }]
]
}同时，在 webpack.config.js 文件中需要添加对 MobX 和 MobX-vue 的引用才能使用它们：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- -----------------
---- -
------- ---------------
-------- -
-------- -
-- ---
--
-------- -
-- ---
---------- - ------------ ------- ------ ---- ---
------------------------------------- - --------- ---- ---
----------------------------------- - --------- ---- ---
--
--
--
--
--
--
-- ---
-使用 babel-plugin-transform-decorators-legacy 插件
我们还需要安装 babel-plugin-transform-decorators-legacy 插件来支持 MobX 装饰器语法的转换：
npm install babel-plugin-transform-decorators-legacy --save-dev
同时，在 .babelrc 中添加该插件的引用：
// .babelrc
{
"plugins": [
// ...
"transform-decorators-legacy"
]
}示例代码
下面给出一个简单的例子来展示如何在 Vue 中使用 MobX（2.x 版本）：
-- -------------------- ---- -------
----------
-----
--------- -- ----- ------
------- -----------------------------
------- -----------------------------
------
-----------
------- ----------
------ - ---------- ---- ------ - ---- ------------------------
------ - -------- - ---- ----------
------ ------------ ---- ----------------
----------
---------
------ ------- ----- ------- ------- --- -
--------------------- -------------- ------------
--- ------- -
------ -----------------------
-
----------- -
-----------------------------
-
----------- -
-----------------------------
-
-
---------注意，在以上代码中，我们必须在组件中使用 @inject 装饰器注入 CounterStore，同时在 CounterStore 中使用装饰器来标记状态和方法。而在使用 MobX 打包应用程序时，我们需要在 .babelrc 中配置 babel-plugin-transform-decorators-legacy 插件，以支持装饰器的语法转换。
总结
本文详细介绍了如何在 Vue 中使用 MobX（2.x 版本）及配合 Webpack 打包，包括创建 store、使用插件 mobx-vue 以及在组件中使用 store 等步骤，并提供了示例代码。希望本文能够对前端开发人员在使用 MobX 时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c319e083d39b488170a096