@christphe/vuex-composition-helpers
v1.0.15
Published
Helpers to use Vuex store form Vue Composition API
Downloads
2
Maintainers
Readme
vuex-composition-helpers
A util package to use Vuex with Composition API easily.
Installation
$ npm install vuex-composition-helpers
Basic Usage Examples
import { useState, useActions } from 'vuex-composition-helpers';
export default {
props: {
articleId: String
},
setup(props) {
const { fetch } = useActions(['fetch']);
const { article, comments } = useState(['article', 'comments']);
fetch(props.articleId); // dispatch the "fetch" action
return {
// both are computed compositions for to the store
article,
comments
}
}
}
Namespaced Usage Examples
import { createNamespacedHelpers } from 'vuex-composition-helpers';
const { useState, useActions } = createNamespacedHelpers('articles'); // specific module name
export default {
props: {
articleId: String
},
setup(props) {
const { fetch } = useActions(['fetch']);
const { article, comments } = useState(['article', 'comments']);
fetch(props.articleId); // dispatch the "fetch" action
return {
// both are computed compositions for to the store
article,
comments
}
}
}
You can also import your store from outside the component, and create the helpers outside of the setup
method, for example:
import { createNamespacedHelpers } from 'vuex-composition-helpers';
import store from '../store'; // local store file
const { useState, useActions } = createNamespacedHelpers(store, 'articles'); // specific module name
const { fetch } = useActions(['fetch']);
export default {
props: {
articleId: String
},
setup(props) {
const { article, comments } = useState(['article', 'comments']);
fetch(props.articleId); // dispatch the "fetch" action
return {
// both are computed compositions for to the store
article,
comments
}
}
}
Typescript mappings
You can also supply typing information to each of the mapping functions to provide a fully typed mapping.
import { useState, useActions } from 'vuex-composition-helpers';
interface RootGetters extends GetterTree<any, any> {
article: string;
comments: string;
}
interface RootActions extends ActionTree<any, any> {
fetch: (ctx: ActionContext<any, any>, payload: number);
}
export default {
props: {
articleId: String
},
setup(props) {
const { fetch } = useActions<RootActions>(['fetch']);
const { article, comments } = useGetters<RootGetters>(['article', 'comments']);
fetch(props.articleId); // dispatch the "fetch" action
return {
// both are computed compositions for to the store
article,
comments
}
}
}
Advanced Usage Example
consider separate the store composition file from the store usage inside the component. i.g.:
// store-composition.js:
import { wrapStore } from 'vuex-composition-helpers';
import store from '@/store'; // local store file
export default wrapStore(store);
// my-component.vue:
import { createNamespacedHelpers } from './store-composition.js';
const { useState, useActions } = createNamespacedHelpers('articles'); // specific module name
const { fetch } = useActions(['fetch']);
export default {
props: {
articleId: String
},
setup(props) {
const { article, comments } = useState(['article', 'comments']);
fetch(props.articleId); // dispatch the "fetch" action
return {
// both are computed compositions for to the store
article,
comments
}
}
}
Enjoy!