Vue 的这些装饰器，你还不会？（1）

vuex-class

当你使用 Vue.js 和 Vuex 来构建应用程序时，你可能会发现在组件中访问和管理 Vuex store 中的状态有些繁琐。为了解决这个问题，你可以使用 Vuex Class，这是一个基于 TypeScript 的 Vuex 插件，它提供了一些装饰器和辅助函数，使得在组件中访问和管理 Vuex store 中的状态更加方便。

Github 地址：vuex-class

下载

npm install --save vuex-class

eg.1 集中写法

这个是官方文档里给出的例子：

import Vue from 'vue'
import Component from 'vue-class-component'
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'

const someModule = namespace('path/to/module')

@Component
export class MyComp extends Vue {
  @State('foo') stateFoo
  @State(state => state.bar) stateBar
  @Getter('foo') getterFoo
  @Action('foo') actionFoo
  @Mutation('foo') mutationFoo
  @someModule.Getter('foo') moduleGetterFoo

  // If the argument is omitted, use the property name
  // for each state/getter/action/mutation type
  @State foo
  @Getter bar
  @Action baz
  @Mutation qux

  created () {
    this.stateFoo // -> store.state.foo
    this.stateBar // -> store.state.bar
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
    this.moduleGetterFoo // -> store.getters['path/to/module/foo']
  }
}

eg.2 分散写法

我个人的项目中进行的拆分，是如下形式

// state
const store: xxxStore = {
    param1: '',
    param2: 12,
    param3: [],
    param4: null,
}
export default store

// getters
const getters: xxxGetter<Y, Z> = {
    getParam1(state) {
        return state.param1
    },
    getParam2(state) {
        return state.param2
    },
    getParam3(state) {
        return state.param3
    },
}
export default getters

// actions
import { CONSTANT } from '@/constant'
const actions: xxxActions<Y, Z> = {
    updateParam1({ commit }, newParam): void {
        commit(CONSTANT, newParam)
    },
}
export default actions

// mutations
import { CONSTANT } from '@/constant'
const mutations: xxxMutations<Y, Z> = {
    [CONSTANT](state, newParam) {
        state.param1 = newParam
    }
}
export default mutations

在组件中的使用:

@Action("updateParam1", { namespace: "update" }) private updateParam1!: (
    newParam: string
  ) => void;
@Getter("getParam1", { namespace: "update" }) protected getParam1!: any;
@State('params1', { namespace: 'update' })

那么这就是本期的全部内容啦～

对你有帮助的话请点个赞捏～