Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

vuex-composition-helpers

1.0.10 • Public • Published

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, { root }) {
        const { fetch } = useActions(root.store, ['fetch']);
        const { article, comments } = useState(root.store, ['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';
 
export default {
    props: {
        articleId: String
    },
    setup(props, { root }) {
        const { useState, useActions } = createNamespacedHelpers(root.store, 'articles'); // specific module name
        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
        }
    }
}

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!

Install

npm i vuex-composition-helpers

DownloadsWeekly Downloads

33

Version

1.0.10

License

MIT

Unpacked Size

17.4 kB

Total Files

19

Last publish

Collaborators

  • avatar