介绍
vuex-shortly 是一个在 Vuex 基础上的状态管理工具，它可以帮助我们更加方便地管理状态，并提供了快速生成状态代码的便利。
安装
要使用 vuex-shortly，我们首先需要安装它。
npm install vuex-shortly --save
使用
在项目中引入 vuex-shortly 并使用它来管理状态。
初始化
我们先创建一个 store，并引入 vuex-shortly。
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
------ - ----------- - ---- --------------
-------------
----- ----- - -------------
-- --
------ -
------ -
--
-- -------
---------- -
---------------- -
-------------
-
-
--
------ ------- -----
在创建 store 的时候，我们传入一个配置对象。配置对象包括状态和修改状态的方法。
使用
我们可以在组件中使用 vuex-shortly 来获取或修改状态，并监听状态的变化。
-- -------------------- ---- -------
----------
-----
--------- -- ----- ------
------- ------------------------------------------
------
-----------
--------
------ - --------- ------------ - ---- --------------
------ ------- -
--------- -
----------------------
--
-------- -
-------------------------------
---------------- -
----------------
-
-
-
---------在组件中我们使用了 mapState 和 mapMutations，他们可以把状态和修改状态的方法映射到组件的 computed 和 methods 中，可以让我们非常方便地获取和修改状态。
进阶使用
除了基本的状态管理，vuex-shortly 还提供了一些高级功能来更好地管理状态。
命名空间
当我们的应用复杂度增加的时候，状态的数量也会增加，这个时候就需要更好的管理状态了。这个时候，我们可以使用命名空间来做到更好的状态管理。
我们可以在创建 store 的时候，使用 namespace 选项来开启命名空间。
-- -------------------- ---- -------
----- ----- - -------------
---------- -----
-- --
------ -
------ -
--
-- -------
---------- -
---------------- -
-------------
-
-
--开启命名空间之后，我们可以使用 mapState 和 mapMutations 来映射我们的状态和方法。
-- -------------------- ---- -------
----------
-----
--------- -- -------- ------
------- ------------------------------------ ------- ----------
--------- -- -------- ------
------- ------------------------------------ ------- ----------
------
-----------
--------
------ - --------- ------------ - ---- --------------
------ ------- -
--------- -
----------------------- -----------
----------------------- ----------
--
-------- -
--------------------------- ---------------
--------------------------- --------------
-
-
---------Model
vuex-shortly 还提供了 Model 功能，它能够根据我们的状态和页面自动生成和管理我们的代码。
我们可以通过 model 选项来开启 Model。
-- -------------------- ---- -------
----- ----- - -------------
------ -----
-- --
------ -
------ -
--
-- -------
---------- -
---------------- -
-------------
-
-
--开启 Model 之后，我们可以在组件中定义一个 model，vuex-shortly 就会根据这个 model 自动生成我们需要的方法。
-- -------------------- ---- -------
----------
-----
--------- -- ----- ------
------- -------------------------------------
------
-----------
--------
------ - ----- - ---- --------------
------ ------- -
------ -
----- --------
------ -----------
--
------ -
------ -
----- -------
-------- -
-
-
-
---------model 选项
prop：定义一个在父组件中用于与 model 进行双向绑定的 prop 名称，默认为value。event：定义一个在父组件中监听 model 变化的事件名称，默认为INPUT。deep：定义 model 是否需要深度监听，可以是一个 boolean 或者一个数字，表示遍历的层数。sync：需要设置为 true 才能开启v-bind的.sync修饰符。
插件
vuex-shortly 还提供了插件功能，让我们可以使用第三方插件来增强我们的状态管理功能。
-- -------------------- ---- -------
------ - ------------ --- - ---- --------------
------ -------- ---- ------------
----- ----- - -------------
-------- -----------
-- --
------ -
------ -
--
-- -------
---------- -
---------------- -
-------------
-
-
--我们可以通过 use 方法来添加插件。
import { use } from 'vuex-shortly'
use(myPlugin)总结
vuex-shortly 是一个很方便的状态管理工具，它可以帮助我们更加方便地管理状态，提供了快速生成状态代码的便利。它支持命名空间、Model、插件等高级功能，让我们能够更加方便地管理我们的状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671381e8991b448e3620