什么是 vuex-helpers
vuex-helpers 是一个用于辅助 vuex 开发的 npm 包。它提供了一些常用的 helper 函数，可以让你更加方便地访问和操作 vuex 中的 state, getters, mutations, actions 等。它是一个轻量级的库，但是提供的 helper 函数非常实用，大大简化了 vuex 开发的代码量。
如何安装和使用 vuex-helpers
安装
要使用 vuex-helpers，你需要先安装它：
npm install vuex-helpers --save
使用
使用 vuex-helpers 建议先了解 vuex 的基本概念和 API，这里不再赘述。在使用 vuex-helpers 前，你需要先实例化一个 VuexHelpers 对象，并把它传递给你的 vuex store：
import { VuexHelpers } from 'vuex-helpers'
// ...
const vuexHelpers = new VuexHelpers(store)然后你就可以通过这个 vuexHelpers 对象来访问和操作 vuex 中的 state, getters, mutations, actions 等：
-- -------------------- ---- ------- -- -- ----- ------ ----- -------- - -------------------------------------- -- -- ----- ------ ----------------------------------------- --------- -- ---- -------- --------------------------------------------- -------- -- ---- ------ --------------------------------------------- --------
以上仅仅是一些最基本的用法，下面将介绍更多实用的 helper 函数。
VuexHelpers 提供的 helper 函数
get
用于获取 state 中的某个属性。它接收一个字符串类型的参数，格式为 "module/path/to/prop"，其中 "module" 为模块名，"path/to/prop" 为属性的路径。例如：
const somePropValue = vuexHelpers.get('someModule/someProp')update
用于更新 state 中的某个属性。它接收一个字符串类型的参数，格式同 get，以及一个新的值，例如：
// 更新某个属性
vuexHelpers.update('someModule/someProp', newValue)
// 以函数的形式更新某个属性
vuexHelpers.update('someModule/someProp', old => {
return someComputation(old)
})commit
用于触发一个 mutation。它接收一个字符串类型的参数，格式为 "module/path/to/mutation"，以及一个 payload，例如：
vuexHelpers.commit('someModule/someMutation', payload)dispatch
用于触发一个 action。它接收一个字符串类型的参数，格式为 "module/path/to/action"，以及一个 payload，例如：
vuexHelpers.dispatch('someModule/someAction', payload)getters
一个对象，包含了所有的 getters。可以直接访问某个 getter，例如：
const someGetterValue = vuexHelpers.getters.someGetter
mutations
一个对象，包含了所有的 mutations。可以直接触发某个 mutation，例如：
vuexHelpers.mutations.someMutation(payload)
actions
一个对象，包含了所有的 actions。可以直接触发某个 action，例如：
vuexHelpers.actions.someAction(payload)
getModule
用于获取一个模块，并返回一个新的 VuexHelpers 对象，例如：
const moduleHelpers = vuexHelpers.getModule('someModule')
// 获取该模块下的某个属性
const somePropValue = moduleHelpers.get('someProp')mapGetters
用于批量获取 getters，并将它们映射到组件的 computed 属性中。它接收一个数组或者对象类型的参数，数组中的每个元素或者对象中的每个属性都是一个字符串类型的 getter，例如：
-- -------------------- ---- -------
------ - ---------- - ---- --------------
-- ---
------ ------- -
--------- -
---------------
-------------
--------------
------------------
--
-
-mapMutations
用于批量触发 mutations，并将它们映射到组件的 methods 属性中。它接收一个数组或者对象类型的参数，数组中的每个元素或者对象中的每个属性都是一个字符串类型的 mutation，例如：
-- -------------------- ---- -------
------ - ------------ - ---- --------------
-- ---
------ ------- -
-------- -
-----------------
---------------
----------------
--------------------
--
-
-mapActions
用于批量触发 actions，并将它们映射到组件的 methods 属性中。它接收一个数组或者对象类型的参数，数组中的每个元素或者对象中的每个属性都是一个字符串类型的 action，例如：
-- -------------------- ---- -------
------ - ---------- - ---- --------------
-- ---
------ ------- -
-------- -
---------------
-------------
--------------
------------------
--
-
-总结
vuex-helpers 是一个非常实用的 npm 包，它可以让你更加方便地访问和操作 vuex，大大简化了 vuex 开发的代码量。它提供了多个实用的 helper 函数，可以让你轻松地完成一些常用的操作。同时，它还提供了一些便捷的映射函数，可以让你更加方便地在组件中使用 vuex。如果你是一个 vuex 开发者，那么不妨尝试一下使用 vuex-helpers，相信它会给你带来意想不到的便利。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c4681e8991b448d9dca