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
- Define mutations
/// mutations.js const storeIncrement =
- Define actions
/// actions.js const incrementBy =
- Configure actions and mutations in the Vuex store
state: count: 1 // use the `mapMutations` helper to inject mutations // accepts either an array or a variable number of arguments mutations: actions: incrementBy
- Inject and dispatch actions in Vue components
<!-- Component.vue --> Click me!