https://github.com/alajfit/vuex-action-patcher
💚Add tools to your Vuex action context
https://github.com/alajfit/vuex-action-patcher
vuex vuex-action vuex-plugin
Last synced: about 2 months ago
JSON representation
💚Add tools to your Vuex action context
- Host: GitHub
- URL: https://github.com/alajfit/vuex-action-patcher
- Owner: alajfit
- License: mit
- Created: 2018-07-26T09:06:31.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-01-23T23:08:02.000Z (over 5 years ago)
- Last Synced: 2025-03-02T17:17:01.677Z (3 months ago)
- Topics: vuex, vuex-action, vuex-plugin
- Language: JavaScript
- Homepage: https://alajfit.github.io/vuex-action-patcher/
- Size: 1.09 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Vuex Action Patcher (Adding Tools to Your Context)
[](https://travis-ci.org/alajfit/vuex-action-patcher)
[](https://codecov.io/gh/alajfit/vuex-action-patcher)
[ ](https://www.npmjs.com/package/vuex-action-patcher)
> Add tools to your Vuex action context
## Motivation
I found making tools available to the Vuex action context could be handy for numerous reasons. The library is designed for you to pass the same toolset to all actions from within the context.
* add tools to all actions
* add tools to actions within registered modules
* keep consistent tooling across all actions
## Install
```bash
npm install vuex-action-patcher --save
```
## Usage
### Use in a Vue App
```js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import vuexActionPatcher from 'vuex-action-patcher'
import { name } from '../package.json'
import moment from 'moment'
Vue.use(Vuex)
const tools = vuexActionPatcher(Vuex, { moment })
const store = new Vuex.Store({
state: {
name
},
actions: {
getTime ({ moment }) {
console.log(moment().calendar())
}
},
plugins: [tools]
})
new Vue({
el: '#app',
store,
render: h => h(App)
})
```
### Use with Dynamic Modules
> main.js
```js
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'
import vuexActionPatcher from 'vuex-action-patcher'
import { name } from '../package.json'
import moment from 'moment'
Vue.use(Vuex)
const tools = vuexActionPatcher(Vuex, { moment })
const store = new Vuex.Store({
plugins: [tools]
})
new Vue({
el: '#app',
store,
render: h => h(App)
})
```
> later.js
```js
store.registerModule('myModule', {
state: {
name: 'myModule'
},
actions: {
getTime ({ moment }) {
console.log(moment().calendar())
}
}
})
```
### Use in a Nuxt App
> Under `store/index.js`
```js
import Vuex from 'vuex'
import vuexActionPatcher from 'vuex-action-patcher'
import moment from 'moment'
const vuexActionPatch = vuexActionPatcher(Vuex, { moment })
const createStore = () => {
return new Vuex.Store({
state: () => ({
counter: 0
}),
mutations: {
increment (state) {
state.counter++
}
},
actions: {
getDate ({ moment }) {
console.log(moment().calendar())
}
},
plugins: [vuexActionPatch]
})
}
export default createStore
```