在前端开发中，状态管理是非常重要的一环。而 vuex 是一个专注于 Vue.js 应用程序的状态管理模式和库，可以帮助我们更好地管理组件之间共享的状态。而为了更便捷地使用 vuex，我们可以借助 npm 包 vuex-class。
简介
vuex-class 是一个 vue-class-component 的插件，可以让我们使用装饰器的方式来管理 vuex store 中的状态。它封装了 vuex 的部分 API，使得在组件中直接使用起来非常方便。
安装
我们可以通过 npm 的方式来安装 vuex-class：
--- ------- ---------- ------
基本使用
在组件中使用 vuex-class 需要借助于 TypeScript 或者 JavaScript 的装饰器特性。在组件类的属性或者方法前加上相应的装饰器就可以实现对 vuex store 中状态的引用或者操作。
State
@State 装饰器可以将组件与 vuex store 中的 state 关联起来。具体使用方式如下：
------ - ---------- --- - ---- ------------------------ ------ - ----- - ---- ------------ ---------- ------ ------- ----- ----------- ------- --- - --------------- ----- -- ----------- ----- ------------ -- -------------- ------ -- ------ ----- -
这里 @State 装饰器参数可以是一个函数，函数接收 store 作为参数，返回值为对应属性的值。当参数为字符串时，等效于 state => state[参数]。
Getter
@Getter 装饰器可以将组件与 vuex store 中的 getter 关联起来。具体使用方式如下：
------ - ---------- --- - ---- ------------------------ ------ - ------ - ---- ------------ ---------- ------ ------- ----- ----------- ------- --- - -------------------- ------------- -- ------ ------ --------------- -------- -- ------------------------- -------------- -- ------ ------ -
这里 @Getter 装饰器参数可以是一个函数，函数接收 state 和 getters 作为参数，返回值为对应属性的值。当参数为字符串时，等效于 getters => getters[参数]。
Mutation
@Mutation 装饰器可以将组件的方法与 vuex store 中的 mutation 关联起来。具体使用方式如下：
------ - ---------- --- - ---- ------------------------ ------ - -------- - ---- ------------ ---------- ------ ------- ----- ----------- ------- --- - ---------------------- --------- -- ------ -------- ------------------ --------- -- ------------------- ---- -------------- -- ------ -------- -
这里 @Mutation 装饰器参数可以是一个函数，函数接收 commit 函数作为参数，返回值为对应属性的值。当参数为字符串时，等效于 commit => commit(参数)。
Action
@Action 装饰器可以将组件的方法与 vuex store 中的 action 关联起来。具体使用方式如下：
------ - ---------- --- - ---- ------------------------ ------ - ------ - ---- ------------ ---------- ------ ------- ----- ----------- ------- --- - ------------------------- -------------- -- ------ ------ ------------------ --------- -- -------------------------- ---- ------------------- -- ------ ------ -
这里 @Action 装饰器参数可以是一个函数，函数接收 dispatch 函数作为参数，返回值为对应属性的值。当参数为字符串时，等效于 dispatch => dispatch(参数)。
总结
通过 vuex-class，我们可以非常方便地管理 vuex store 中的状态。在实际开发中，我们可以根据需要选用不同的装饰器来实现与 vuex 的交互。而 vuex-class 的封装也让我们的代码变得更加简洁易读。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/79972