vuex-composition-helpers

A util package to use Vuex with Composition API easily.

Installation

1$ npm install vuex-composition-helpers

For Vue 3.x - use the next tag:

1$ npm install vuex-composition-helpers@next

This library is not transpiled by default. Your project should transpile it, which makes the final build smaller and more tree-shakeable. Take a look at transpiling.

Non-typescript projects may import the library from the dist subdirectory, where plain javascript distribution files are located.

import { useState, ... } from 'vuex-composition-helpers/dist';

Basic Usage Examples

1import { useState, useActions } from 'vuex-composition-helpers';
2
3export default {
4	props: {
5		articleId: String
6	},
7	setup(props) {
8		const { fetch } = useActions(['fetch']);
9		const { article, comments } = useState(['article', 'comments']);
10		fetch(props.articleId); // dispatch the "fetch" action
11
12		return {
13			// both are computed compositions for to the store
14			article,
15			comments
16		}
17	}
18}

Namespaced Usage Examples

createNamespacedHelpers

1import { createNamespacedHelpers } from 'vuex-composition-helpers';
2const { useState, useActions } = createNamespacedHelpers('articles'); // specific module name
3
4export default {
5	props: {
6		articleId: String
7	},
8	setup(props) {
9		const { fetch } = useActions(['fetch']);
10		const { article, comments } = useState(['article', 'comments']);
11		fetch(props.articleId); // dispatch the "fetch" action
12
13		return {
14			// both are computed compositions for to the store
15			article,
16			comments
17		}
18	}
19}

You can also import your store from outside the component, and create the helpers outside of the setup method, for example:

1import { createNamespacedHelpers } from 'vuex-composition-helpers';
2import store from '../store'; // local store file
3import const { useState, useActions } = createNamespacedHelpers(store, 'articles'); // specific module name
4const { fetch } = useActions(['fetch']);
5
6export default {
7	props: {
8		articleId: String
9	},
10	setup(props) {
11		const { article, comments } = useState(['article', 'comments']);
12		fetch(props.articleId); // dispatch the "fetch" action
13
14		return {
15			// both are computed compositions for to the store
16			article,
17			comments
18		}
19	}
20}

Inline namespacing

1import { useState, useActions } from 'vuex-composition-helpers';
2
3export default {
4	setup(props) {
5		const { article, comments } = useState('sections/blog', ['article', 'comments']);
6		return { article, comments }
7	}
8}

Typescript mappings

You can also supply typing information to each of the mapping functions to provide a fully typed mapping.

1import { useState, useActions } from 'vuex-composition-helpers';
2
3interface RootGetters extends GetterTree<any, any> {
4	article: string;
5	comments: string;
6}
7
8interface RootActions extends ActionTree<any, any> {
9	fetch: (ctx: ActionContext<any, any>, payload: number);
10}
11
12export default {
13	props: {
14		articleId: String
15	},
16	setup(props) {
17		const { fetch } = useActions<RootActions>(['fetch']);
18		const { article, comments } = useGetters<RootGetters>(['article', 'comments']);
19		fetch(props.articleId); // dispatch the "fetch" action
20
21		return {
22			// both are computed compositions for to the store
23			article,
24			comments
25		}
26	}
27}

Typescript Namespaced Usage Example

1import { useState, useActions } from 'vuex-composition-helpers';
2import { ModuleState, ModuleGetters, ModuleActions, ModuleMutations } from "../store/subModule"
3
4export default {
5	props: {
6		articleId: String
7	},
8	setup(props) {
9		const { useState, useActions } = createNamespacedHelpers<
10			ModuleState,
11			ModuleGetters,
12			ModuleActions,
13			ModuleMutations
14		>('articles'); // specific module name and generics
15		const { fetch } = useActions(['fetch']); // no generics needed any more
16		const { article, comments } = useGetters(['article', 'comments']); // no generics needed any more
17		fetch(props.articleId); // dispatch the "fetch" action
18
19		return {
20			// both are computed compositions for to the store
21			article,
22			comments
23		}
24	}
25}

Advanced Usage Example

Consider separate the store composition file from the store usage inside the component. i.g.:

1// store-composition.js:
2import { wrapStore } from 'vuex-composition-helpers';
3import store from '@/store'; // local store file
4
5export default wrapStore(store);

1// my-component.vue:
2import { createNamespacedHelpers } from './store-composition.js';
3const { useState, useActions } = createNamespacedHelpers('articles'); // specific module name
4const { fetch } = useActions(['fetch']);
5
6export default {
7	props: {
8		articleId: String
9	},
10	setup(props) {
11		const { article, comments } = useState(['article', 'comments']);
12		fetch(props.articleId); // dispatch the "fetch" action
13
14		return {
15			// both are computed compositions for to the store
16			article,
17			comments
18		}
19	}
20}

Transpiling

It depends on you project's stack, but let's say it consists of webpack, babel and ts-loader.

The rule processing .ts files should whitelist vuex-composition-helpers. If your project uses a raw webpack installation, it should resemble this.

1// webpack.config.js
2module.exports = {
3  ...
4  module: {
5    rules: [
6      test: /\.ts$/,
7      // If node_modules is excluded from the rule, vuex-composition-helpers should be an exception
8      exclude: /node_modules(?!\/vuex-composition-helpers)/,
9      use: [
10        {
11          loader: 'babel-loader',
12          ...
13        },
14        {
15          loader: 'thread-loader',
16          options: { ... }
17        },
18        {
19          loader: 'ts-loader',
20          ...
21        }
22    ]
23  }
24}

When using vue-cli, use this instead

1// vue.config.js
2module.exports = {
3  ...
4  chainWebpack: config => {
5    config
6      .rule('ts')
7      .include
8      .add(/vuex-composition-helpers/)
9  }
10}

If your webpack configuration is excluding node_modules from the bundle, which is common for SSR, this library should be an exception.

// webpack.config.js
module.exports = {
 ...
  externals: [nodeExternals({
    whitelist: [/^vuex-composition-helpers/]
  })],
}

Babel should not exclude or ignore this library. If you use vue-cli, you may need the following configuration.

1// vue.config.js
2module.exports = {
3  ...
4  transpileDependencies: ['vuex-composition-helpers'],
5}

Although it's not strictly required, maybe ts-loader needs to have allowTsInNodeModules enabled in your project. Finally check that this library is not excluded in tsconfig.json, and if it was necessary, put it in the include list.

Enjoy!