前言
Vue-sam 是一个基于 Vue.js 的开发框架，它能够快速构建高性能的界面展示应用程序，它结合了 Redux 和 RxJS 等技术，提供了统一而且易于维护的状态管理体系。
本文将会讲述如何使用 Npm 包 Vue-sam，以及详细地介绍 Vue-sam 中的核心概念和基础使用方法。
安装
在使用 Vue-sam 之前，需要先通过 Npm 安装：
npm install --save vue-sam
基础使用
Vue-sam 中包含了四个重要的概念：Actions、Mutations、Getters 和 State。
其中，State 是应用程序中所有的数据存储区域，它是响应式的，也就是说当 State 发生变化时，相关联的组件将会自动进行重渲染。
Actions 封装了所有可能触发 State 变化的操作，比如登录、获取用户数据等等。
Mutations 是具体执行 State 变化的方法。
Getters 让我们能够在组件中获取 State 中的数据或根据 State 中的数据计算新的数据。
事实上，这几个概念是类似于 Redux 中的 Store、Action 和 Reducer，不同点是 Vue-sam 中还有一个 Getters 的概念。
在开始使用 Vue-sam 前，需要先创建一个 Store 的实例，并将其绑定到 Vue 根实例上：
-- -------------------- ---- ------- ------ --- ---- ----- ------ ------ ---- --------- ----- ------------ - - ------ - - ----- ----- - --- -------------------- --- ----- ------ -- ------- --
这里的 initialState 就是我们的 State，它包含了我们的初始数据，然后通过 new VueSam(initialState) 创建一个 Store 的实例，并将其使用 Vue.use() 注册到 Vue 根实例上。
接下来，我们通过 Actions 修改 State：
-- -------------------- ---- -------
----- ------- - -
----------- ------ -- -
-------------------
-
-
----- --------- - -
---------------- -
-------------
-
-
----- ----- - --- --------
------ -------------
--------
---------
--这里我们定义了一个 Action：increment，它通过 commit() 方法调用了对应的 Mutations：increment，然后 Mutations 对 State 进行修改，这里的 state 就是我们原先定义的 initialState。
接着，我们可以在组件中使用内置的 $store 对象访问 State，或者通过使用内置的 $sam 对象来直接调用 Actions：
// 访问 State 中的 count 数据 this.$store.state.count // 调用 increment Action this.$sam.increment()
在上面的例子中，我们通过在组件中访问 $store.state.count 来获取 State 中的 count 数据，或者使用 $sam.increment() 直接调用 increment Action。
案例
下面我们来看一个 Vue-sam 的案例：
我们要实现一个投票应用，让用户能够选择自己喜爱的颜色。
首先，我们定义 State：
const initialState = {
colors: [
{ name: 'red', count: 0 },
{ name: 'green', count: 0 },
{ name: 'blue', count: 0 },
]
}这里我们给每个颜色设定了初始的 count 值为 0。
然后，定义 Actions:
const actions = {
vote({ commit }, colorName) {
commit('vote', colorName)
}
}这里我们定义了一个 Action：vote，它接受一个参数 colorName，它会调用对应的 Mutations：vote：
-- -------------------- ---- -------
----- --------- - -
----------- ---------- -
-------------------------- -- -
-- ----------- --- ---------- -
-------------
-
--
-
-最后，我们在组件中通过 $sam 对象来调用 vote Action：
-- -------------------- ---- -------
----------
-----
--------- ----- -- --- ----------
----
--- ------------ -- ------- ------------------
--------------
------- ---------------------------------------
----------------------------
-----
-----
------
-----------
--------
------ ------- -
--------- -
-------- -
------ ------------------------
-
--
-------- -
--------------- -
-------------------------
-
-
-
---------在组件中，我们使用了 computed 计算属性来访问 State 中的 colors 数据，然后在模板中循环渲染每个颜色，并且通过 @click 事件监听用户的点击行为，然后调用 vote() 方法来进行投票。
这样就完成了一个简单的投票应用。
总结
在本文中，我们详细地介绍了 Vue-sam 的基本概念，包括 Actions、Mutations、Getters 和 State，以及如何使用 Vue-sam 构建一个投票应用程序。
通过学习 Vue-sam，我们发现它与 Redux 类似，但也有很多不同之处。作为 Vue 生态系统中的一员，Vue-sam 提供了一种统一的、易于维护的状态管理方式，帮助我们更好地构建 Vue 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eae81e8991b448dc392