A util package to use Vuex with Composition API easily.

Installation

$ npm install vuex-composition-helpers

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

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 ) ; return { article , comments } } }

Namespaced Usage Examples

import { createNamespacedHelpers } from ' vuex-composition-helpers ' ; const { useState , useActions } = createNamespacedHelpers ( ' articles ' ) ; export default { props : { articleId : String } , setup ( props ) { const { fetch } = useActions ( [ ' fetch ' ] ) ; const { article , comments } = useState ( [ ' article ' , ' comments ' ] ) ; fetch ( props . articleId ) ; return { 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 ' ; const { useState , useActions } = createNamespacedHelpers ( store , ' articles ' ) ; const { fetch } = useActions ( [ ' fetch ' ] ) ; export default { props : { articleId : String } , setup ( props ) { const { article , comments } = useState ( [ ' article ' , ' comments ' ] ) ; fetch ( props . articleId ) ; return { 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 > { ; ; } interface RootActions extends ActionTree < any , any > { ; }

Advanced Usage Example

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

import { wrapStore } from ' vuex-composition-helpers ' ; import store from ' @/store ' ; export default wrapStore ( store ) ;

import { createNamespacedHelpers } from ' ./store-composition.js ' ; const { useState , useActions } = createNamespacedHelpers ( ' articles ' ) ; const { fetch } = useActions ( [ ' fetch ' ] ) ; export default { props : { articleId : String } , setup ( props ) { const { article , comments } = useState ( [ ' article ' , ' comments ' ] ) ; fetch ( props . articleId ) ; return { article , comments } } }

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.

module . exports = { ... module : { rules : [ test : / \. ts $ / , exclude : / node_modules ( ?! \/ vuex-composition-helpers ) / , use : [ { loader : ' babel-loader ' , ... } , { loader : ' thread-loader ' , options : { ... } } , { loader : ' ts-loader ' , ... } ] } }

When using vue-cli , use this instead

module . exports = { ... chainWebpack : config => { config . rule ( ' ts ' ) . include . add ( / vuex-composition-helpers / ) } }

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.

module . exports = { ... transpileDependencies : [ ' vuex-composition-helpers ' ] , }

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!