vuex-function-actions

| Refactor-friendly Vuex actions and mutations, heavily inspired by redux-actions

Installation

$ npm install --save vuex-function-actions

The npm package provides a CommonJS build for use in Node.js, and with bundlers like Webpack and Browserify. It also includes an ES modules build that works well with Rollup and Webpack2's tree-shaking.

The UMD build (or the minified flavor) exports a global called window.VuexFunctionActions if you add it to your page via a <script> tag. We don’t recommend UMD builds for any serious application, as most of the libraries complementary to Vuex are only available on npm. Note that this package has a peer dependency on Vuex, therefore if you use the UMD build, Vuex has to be included before.

Motivation

In plain Vuex, actions and mutations have string keys, which is not very refactoring friendly. The aim of this library is to allow using functions rather than strings to:

• configure actions and mutations in the Vuex store
• import actions in components
• commit mutations in actions

Usage

1. Define mutations

/// mutations.js
import { createMutation } from 'vuex-function-actions'

export const storeIncrement = createMutation('STORE_INCREMENT', (state, { amount }) => {
  state.count += amount
})

2. Define actions

/// actions.js
import { createAction } from 'vuex-function-actions'
import { storeIncrement } from './mutations'

export const incrementBy = createAction('INCREMENT_BY', ({ commit }, amount) => 
  // commit function mutations instead of strings
  commit(storeIncrement({ amount }))
)

1. Configure actions and mutations in the Vuex store

import Vuex from 'vuex'
import { mapMutations } from 'vuex-function-actions'
import { storeIncrement } from './mutations'
import { incrementBy } from './actions'

new Vuex.Store({
  state: {
    count: 1
  },
  // use the `mapMutations` helper to inject mutations
  // accepts either an array or a variable number of arguments
  mutations: mapMutations(storeIncrement),
  actions: {
    incrementBy
  }
})

4. Inject and dispatch actions in Vue components

<!-- Component.vue -->
<template>
  <button @click="onClick">Click me!</button>
</template>

<script>
import { mapActions } from 'vuex-function-actions'
import { incrementBy } from './actions'

export default {
  /* ... */
  methods: {
    // use the `mapActions` helper to inject function actions
    // accepts either an array or a variable number of arguments
    ...mapActions(incrementBy),
    onClick() {
      // dispatch the injected actions in the usual way
      this.incrementBy(1)
    }
  }
}
</script>