ktsn / Vuex Mappers
Licence: mit
Component agnostic Vuex mappers
Stars: ✭ 19
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Vuex Mappers
Vuex Rest Api
A utility to simplify the use of REST APIs with Vuex
Stars: ✭ 365 (+1821.05%)
Mutual labels: helper, vuex
background-service-lib
Essential classes for reliable background services.
Stars: ✭ 24 (+26.32%)
Mutual labels: helper, binding
Mappinggenerator
🔄 "AutoMapper" like, Roslyn based, code fix provider that allows to generate mapping code in design time.
Stars: ✭ 831 (+4273.68%)
Mutual labels: mapper
Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+3736.84%)
Mutual labels: vuex
Logging Helpers
Basic template helpers for printing messages out to the console. Useful for debugging context in templates. Should work with any template engine.
Stars: ✭ 5 (-73.68%)
Mutual labels: helper
Pacaur
[unmaintained] An AUR helper that minimizes user interaction
Stars: ✭ 818 (+4205.26%)
Mutual labels: helper
Go Tagexpr
An interesting go struct tag expression syntax for field validation, etc.
Stars: ✭ 807 (+4147.37%)
Mutual labels: binding
Vuejs Training
VueJS training including Vue ecosystem: HTTP (Axios), Vuex, Unit Testting (Jest)...
Stars: ✭ 6 (-68.42%)
Mutual labels: vuex
vuex-mappers
Component agnostic Vuex mappers.
Usage
Install it via npm:
$ npm install vuex-mappers
There are four mappers in vuex-mappers: state
, getter
, mutation
and action
. They have similar API with Vuex's mapXXX
helpers but are Vue component agnostic and return only one bound function.
For example, imagine following store:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
count: 0
},
getters: {
double: state => state.count * 2
},
mutations: {
inc(state, amount) {
state.count += amount
}
},
actions: {
incAsync({ commit }, amount) {
setTimeout(() => {
commit('inc', amount)
}, 1000)
}
}
})
Then you declare store mappers:
import { state, getters, mutations, actions } from 'vuex-mappers'
import { store } from './store'
const count = state('count')(store)
const double = getter('double')(store)
const inc = mutation('inc')(store)
const incAsync = action('incAsync')(store)
console.log(count()) // store.state.count
console.log(double()) // store.getters.double
inc(123) // store.commit('inc', 123)
incAsync(123) // store.dispatch('incAsync', 123)
You may want to pass namespace for the mapper:
import Vuex from 'vuex'
import { state } from 'vuex-mappers'
const store = new Vuex.Store({
modules: {
foo: {
namespaced: true,
state: {
message: 'Hello'
}
}
}
})
// You can specify namespace value to 1st argument
const message = state('foo/', 'message')(store)
console.log(message()) // -> Hello
state
mapper also receive a function which receives store state and getters:
import Vuex from 'vuex'
import { state } from 'vuex-mappers'
const store = new Vuex.Store({
state: {
count: 1
},
getters: {
double: state => state.count * 2
}
})
const value = state((state, getters) => {
return state.count + getters.double
})(store)
console.log(value()) // -> 3
mutation
and action
mapper can receive a function for more flexible mapping:
import Vuex from 'vuex'
import { mutation, action } from 'vuex-mappers'
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
inc(state, amount) {
state.count += amount
}
},
actions: {
incAsync({ commit }, amount) {
setTimeout(() => {
commit('inc', amount)
}, 1000)
}
}
})
const incDouble = mutation((commit, amount) => {
commit('inc', amount * 2)
})(store)
const incDoubleAsync = action((dispatch, amount) => {
dispatch('incAsync', amount * 2)
})(store)
incDouble(123)
incDoubleAsync(123)
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].