npm 包 vuex-class 使用教程

在前端开发中，状态管理是非常重要的一环。而 vuex 是一个专注于 Vue.js 应用程序的状态管理模式和库，可以帮助我们更好地管理组件之间共享的状态。而为了更便捷地使用 vuex，我们可以借助 npm 包 vuex-class。

简介

vuex-class 是一个 vue-class-component 的插件，可以让我们使用装饰器的方式来管理 vuex store 中的状态。它封装了 vuex 的部分 API，使得在组件中直接使用起来非常方便。

安装

我们可以通过 npm 的方式来安装 vuex-class：

npm install vuex-class --save

基本使用

在组件中使用 vuex-class 需要借助于 TypeScript 或者 JavaScript 的装饰器特性。在组件类的属性或者方法前加上相应的装饰器就可以实现对 vuex store 中状态的引用或者操作。

State

@State 装饰器可以将组件与 vuex store 中的 state 关联起来。具体使用方式如下：

import { Component, Vue } from 'vue-property-decorator'
import { State } from 'vuex-class'

@Component
export default class MyComponent extends Vue {
  @State('count') count // 通过名称（字符串）获取 state
  @State(state => state.user.id) userId // 通过函数获取 state
}

这里 @State 装饰器参数可以是一个函数，函数接收 store 作为参数，返回值为对应属性的值。当参数为字符串时，等效于 state => state[参数]。

Getter

@Getter 装饰器可以将组件与 vuex store 中的 getter 关联起来。具体使用方式如下：

import { Component, Vue } from 'vue-property-decorator'
import { Getter } from 'vuex-class'

@Component
export default class MyComponent extends Vue {
  @Getter('doneTodos') doneTodoCount // 通过名称获取 getter
  @Getter((state, getters) => getters.doneTodos.length) doneTodoLength // 通过函数获取 getter
}

这里 @Getter 装饰器参数可以是一个函数，函数接收 state 和 getters 作为参数，返回值为对应属性的值。当参数为字符串时，等效于 getters => getters[参数]。

Mutation

@Mutation 装饰器可以将组件的方法与 vuex store 中的 mutation 关联起来。具体使用方式如下：

import { Component, Vue } from 'vue-property-decorator'
import { Mutation } from 'vuex-class'

@Component
export default class MyComponent extends Vue {
  @Mutation('increment') increment // 通过名称获取 mutation
  @Mutation((commit: Function) => commit('increment', 10)) incrementByTen // 通过函数获取 mutation
}

这里 @Mutation 装饰器参数可以是一个函数，函数接收 commit 函数作为参数，返回值为对应属性的值。当参数为字符串时，等效于 commit => commit(参数)。

Action

@Action 装饰器可以将组件的方法与 vuex store 中的 action 关联起来。具体使用方式如下：

import { Component, Vue } from 'vue-property-decorator'
import { Action } from 'vuex-class'

@Component
export default class MyComponent extends Vue {
  @Action('incrementAsync') incrementAsync // 通过名称获取 action
  @Action((dispatch: Function) => dispatch('incrementAsync', 10)) incrementAsyncByTen // 通过函数获取 action
}

这里 @Action 装饰器参数可以是一个函数，函数接收 dispatch 函数作为参数，返回值为对应属性的值。当参数为字符串时，等效于 dispatch => dispatch(参数)。

总结

通过 vuex-class，我们可以非常方便地管理 vuex store 中的状态。在实际开发中，我们可以根据需要选用不同的装饰器来实现与 vuex 的交互。而 vuex-class 的封装也让我们的代码变得更加简洁易读。

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