How to use Vuex store with Composition API in Vue.js

The Composition API is a new optional syntax in Vue 3 that provides developers a new way to create components and organize them by feature instead of operation.

With vuex-composition-helpers a util package to use Vuex with Composition API easily.

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
		}
	}
}

Happy coding!

#vue #vuejs #vuex #Composition API