vuex-keg
Vuex Keg
A container plugin for Vuex\
Using Redux? see redux-keg (working on it)
$ npm i -S vuex-keg
$ yarn add vuex-keg
Vuex Keg plugins
Why Do I Need This?
Vuex context has only {dispatch, commit, state, getters, rootState, rootGetters}
Vuex-keg is a solution to add more your functions for vuex
Why Should I Add More functions?
You may need a function to process repetitive code.
const actions = {
myAction({commit, dispatch}, payload){
if(payload === 'tree'){
// do1, do2, ...
}
if(payload === 'sky'){
// do1
commit(payload)
}
// ...
dispatch('more thee')
},
myAction2({commit}){
if(payload === 'tree'){
// do1, do2, ...
}
if(payload === 'sky'){
// do1
commit(payload)
}
commit('tree')
}
}
Why don't you make and add a function for it
import {keg} from './src'
const action = {
...keg({
myAction({commit, dispatch, myUtil}, payload){
myUtil()
dispatch('more thee')
},
myAction2({commit, myUtil}, payload){
myUtil()
commit('tree')
}
})
}
How to Register & Use
import Vue from 'vue'
import Vuex from 'vuex'
import VuexKeg, {keg} from './'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0,
},
mutation: {
increase(state) {
state.count += 1
},
},
actions: {
IAmJustAnAction({commit}, payload) {
commit('increase')
},
// support single running by the name parameter
// no need the name if you think you don't need to use context.name in plugins of Vuex-keg
doSayHum: keg(({justSay}, payload) => {
justSay('Hum', 'foo')
}, {}, 'doSayHum'),
// Now Keg can set many actions at once
...keg({
doSayHi({justSay, commit}, payload) {
// custom keg util
justSay('Hi', 'foo')
// do mutation
commit('increase')
},
doSayHo: ({justSay, commit}, payload) => {
// custom keg util
justSay('Ho', 'foo')
// do mutation
commit('increase')
},
doSayHa: ({justSay, commit}, payload) => {
// custom keg util
justSay('Ha', 'foo')
// do mutation
commit('increase')
},
}, {
pluginOptions: {
justSay: 'anyOptions' // now Keg can send options for plugins
}
}),
// now Keg can hook before and after the Action is executed [^1.2.1]
...keg({
hookTest: (context, payload) => {
console.log(payload) // 'brforeHook/[payload]'
return payload
} // action result is 'afterHook/brforeHook/[payload]'
}, {
// shouldHave: ... // ignore except/ only options
beforeHook: ['beforeHook', (context, payload) => (payload)], // it can be array, which will run all plugins in order
afterHook: 'afterHook', // can be string
})
},
plugins: [
VuexKeg({
plugins: {
justSay: (store) => (context, payload, options) => (say, yourName) => (window.console.log(`${say}!`, yourName, options)),
beforeHook: (store) => (context, payload) => (param /*payload*/) => (`beforeHook/${param}`),
afterHook: (store) => (context, payload) => (param /*result*/) => (`afterHook/${param}`)
},
// beforeAction: ...
// afterAction: ...
})
],
}
)
Dependencies
Dependencies
@babel/core: ^7.1.2@babel/polyfill: ^7.0.0@nuxtjs/babel-preset-app: ^0.7.0@types/chai: ^4.1.4@types/lodash: ^4.14.110@types/mocha: ^5.2.2@types/node: ^10.5.3@types/sinon: ^5.0.1babel-loader: ^8.0.4babel-plugin-lodash: ^3.3.4chai: ^4.2.0codecov: ^3.1.0eslint: 5.6.1eslint-friendly-formatter: ^4.0.1eslint-loader: ^2.1.0eslint-plugin-html: ^4.0.5eslint-plugin-promise: ^4.0.1eslint-plugin-typescript: ^0.12.0eslint-plugin-vue: ^4.7.1istanbul-instrumenter-loader: ^3.0.1karma: ^3.0.0karma-chai: ^0.1.0karma-chrome-launcher: ^2.2.0karma-coverage: ^1.1.2karma-mocha: ^1.3.0karma-phantomjs-launcher: ^1.0.4karma-remap-coverage: ^0.1.5karma-sourcemap-loader: ^0.3.7karma-spec-reporter: 0.0.32karma-webpack: ^3.0.5mocha: ^5.2.0rollup-plugin-typescript: ^1.0.0ts-loader: ^5.2.1tsconfig-paths-webpack-plugin: ^3.2.0tslib: ^1.9.3tslint: ^5.11.0typedoc: ^0.12.0typescript: ^3.1.1typescript-eslint-parser: ^19.0.2uglifyjs-webpack-plugin: ^2.0.1webpack: ^4.20.2webpack-merge: ^4.1.4webpack-node-externals: ^1.7.2