npm 包 vue-stateful 使用教程-JavaScript中文网-JavaScript教程资源分享门户

vue-stateful 是一个用于在 Vue.js 组件中创建存储状态的小型混入，包括两个名称空间 $store 和 $states。

安装

通过 npm 安装 vue-stateful：

npm install vue-stateful --save

作为一个 mixin 使用时：

import Vue from 'vue'
import vueStateful from 'vue-stateful'

Vue.mixin(vueStateful)

也可以手动安装：

import { install } from 'vue-stateful'

Vue.use(install)

使用

$store

所有状态（状态管理器）被保留在 $store 名称空间中。可以像访问对象一样访问它们。

computed: {
  count () {
    return this.$store.counter
  }
}

在上面的代码中，我们可以访问 $store 的计数器状态。

$states

$states 名称空间中保存了与组件实例关联的所有状态。像访问对象一样访问它们。

-- -------------------- ---- -------
-------- -
  -------- ------- -------
--
--------- -
  ------- -- -
    ------ --------------------
  -
--
-------- -
  ------------- -- -
    -------------------- - ----------- -------
  -
-

在上面的代码中，我们创建了一个 $states 对象并将其绑定到了 message 属性。在 computed 中访问 message，并在 methods 中对其进行更改。

请注意，在 $store 和 $states 中的状态都是响应式的。换句话说，如果我们更改状态，组件中的使用该状态的任何东西都将更新。

示例代码

以下是一个使用 vue-stateful 的组件示例：

-- -------------------- ---- -------
----------
  ---- ----------------
    ---------- -- ----- -------
    ------- -------------------------------------
    ------- -------------------------------------
  ------
-----------

--------
  ------ ------- -
    -- ----------
    ------- -
      -------- -
    --
    --------- -
      ----- -- -
        ------ -------------------
      -
    --
    -------- -
      --------- -- -
        ---------------------
      --
      --------- -- -
        -- -------------------- - -- -
          ---------------------
        -
      -
    -
  -
---------

结论

Vue.js 和 vue-stateful 可以让开发人员更轻松地管理组件的状态。$store 和 $states 名称空间可以使状态管理更加直观和组织良好。将 vue-stateful 混入到您的 Vue.js 组件中，轻松管理状态！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600555b881e8991b448d2d14