1. vuex-class
Binding helpers for Vuex and vue-class-component
vuex-class
Package: vuex-class
Created by: ktsn
Last modified: Tue, 28 Jun 2022 21:02:17 GMT
Version: 0.3.2
License: MIT
Downloads: 397,749
Repository: https://github.com/ktsn/vuex-class

Install

npm install vuex-class
yarn add vuex-class

vuex-class

vuex-class Dev Token

Binding helpers for Vuex and vue-class-component

Dependencies

Installation

 $ npm install --save vuex-class
# or
$ yarn add vuex-class

Example

 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']
  }
}

Issue Reporting Guideline

Questions

For general usage question which is not related to vuex-class should be posted to StackOverflow or other Q&A forum. Such questions will be closed without an answer.

Bug Reports

Please make sure to provide minimal and self-contained reproduction when you report a bug. Otherwise the issue will be closed immediately.

License

MIT

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin