Vuex-Queries
Vuex-Queries helps you write query functions in Vuex
Usage
Write your queries in Vuex options:
const options = {
state: {
events: [{id: 1, author: ['a', 'b']}, {id: 2, author: ['b', 'c']}, {id: 3, author: ['c', 'a']}],
},
queries: {
getEventByAuthors (context, authors) {
return context.state.events.filter(e => authors.every(author => e.author.includes(author)))
}
}
}Query functions receive a context object which contains store's state and getters. You can access them by context.state or context.getters, or using Object Destructuring feature in ES2015:
const options = {
state: {
events: [{id: 1, author: ['a', 'b']}, {id: 2, author: ['b', 'c']}, {id: 3, author: ['c', 'a']}],
},
queries: {
getEventByAuthors ({state, getters}, authors) {
return state.events.filter(e => authors.every(author => e.author.includes(author)))
}
}
}Inside module queries, context will also contain rootState and rootGetters.
const options = {
state: {
events: [{id: 1, author: ['a', 'b']}, {id: 2, author: ['b', 'c']}, {id: 3, author: ['c', 'a']}],
},
computed: {
currentAuthor (state) {
return state.author[0]
}
},
modules: {
foo: {
namespaced: true,
queries: {
getEvents ({rootState, rootGetters}, authors) {
return rootState.events.filter(e => authors.concat(rootGetters.currentAuthor).every(author => e.author.includes(author)))
}
}
}
}
}Before creating Vuex store, transform the options with supportQuery(options) method:
import Vuex from 'vuex'
import { supportQuery } from 'vuex-queries'
const store = new Vuex.Store(supportQuery(options))Use mapQueries(namespace, map) method (which has the same parameters as other component binding helpers) to map component methods to query functions:
import { mapQueries } from 'vuex-queries'
export default {
methods: {
...mapQueries(['getEventByAuthors'])
},
render () {
return (
<div>
{this.getEventByAuthors(['a', 'c']).map(e => (
<p>Event: {e.id}</p>
))}
</div>
)
}
}Changelog
v1.1.1
- update peerDependencies to allow work with Vuex 3.x
v1.1.0
- Add support for
rootState&rootGetters
