javascript - Using Vuex 4 modules in Vue 3 with TypeScript, and how to fix cyclical dependency linting error? - Stack Overflow

admin管理员组

文章数量:1336289

As of this writing, Vue 3.0 has reached it's first stable v3.0.0 'One Piece' release, with Vuex 4 being in v4.0.0-beta.4.

Unfortunately there is no official examples yet on how to use Vuex 4 modules in TypeScript...

As a further requirement, I want to have store modules state, mutations, getters, and actions in their own files. This makes it easier to manage the code when these modules grow.

I managed to piece together a working example repository in Github and Codesandbox.

By using the examples provided in these resources:

• Vuex + TypeScript by Andrew in Dev.to
• Gist javisperez/index.ts
• Repo andrewvasilchuk/vuex-typescript
• Vue 3 & Vuex 4: useStoreModule posable by Barylski in Dev.to
• A plete guide to mapping in Vuex by LogRocket

However, a few quirks remains to be solved:

1. Resolving dependency cycle linting errors

Currently the typings in a module's index.ts, actions.ts, and getters.ts are dependent on importing RootState from the main store.

When using ESLint Airbnb linting config, I'm barraged with linting errors like (currently disabled by // eslint-disable-next-line rules in the repo and example):

Dependency cycle via @/store/modules/profile > eslint(import/no-cycle)

While this doesn't seem to affect the actual functioning of the store (or does it?), I'd like to know how to overe this without needing to turn the rule off, or needing to use // eslint-disable-next-line import/no-cycle on those lines?

I haven't tried if this happens with Standard and Prettier linter configs, or is it related to Airbnb rules?

2. How to have a module without any actions?

I tried to have profile module configured without using any actions, however I was unable to get the types rights.

Currently the example code includes one NON_ACTION action type...

3. How to correctly use namespaced: true module option, and how it affects the usage syntax in ponents?

Currently profile store is configured with namespaced: true. In the App.vue I'm demonstrating it by using mapGetters, which takes a module name as the first parameter. This works.

However, documents module is without this option, because dispatch with the action type doesn't work anymore. It seems to be needing to be used with some other syntax variant which I was unable to find.

PS. Any further code polishing suggestion are much wele as ments, answers, and pull requests!

Update 27/09/20: I just realized VS Code intellisense is not showing type information for the store instance after passing it from useStore function, when used inside ponent. Works if imported in .ts file.

As of this writing, Vue 3.0 has reached it's first stable v3.0.0 'One Piece' release, with Vuex 4 being in v4.0.0-beta.4.

Unfortunately there is no official examples yet on how to use Vuex 4 modules in TypeScript...

As a further requirement, I want to have store modules state, mutations, getters, and actions in their own files. This makes it easier to manage the code when these modules grow.

I managed to piece together a working example repository in Github and Codesandbox.

By using the examples provided in these resources:

• Vuex + TypeScript by Andrew in Dev.to
• Gist javisperez/index.ts
• Repo andrewvasilchuk/vuex-typescript
• Vue 3 & Vuex 4: useStoreModule posable by Barylski in Dev.to
• A plete guide to mapping in Vuex by LogRocket

However, a few quirks remains to be solved:

1. Resolving dependency cycle linting errors

Currently the typings in a module's index.ts, actions.ts, and getters.ts are dependent on importing RootState from the main store.

When using ESLint Airbnb linting config, I'm barraged with linting errors like (currently disabled by // eslint-disable-next-line rules in the repo and example):

Dependency cycle via @/store/modules/profile > eslint(import/no-cycle)

While this doesn't seem to affect the actual functioning of the store (or does it?), I'd like to know how to overe this without needing to turn the rule off, or needing to use // eslint-disable-next-line import/no-cycle on those lines?

I haven't tried if this happens with Standard and Prettier linter configs, or is it related to Airbnb rules?

2. How to have a module without any actions?

I tried to have profile module configured without using any actions, however I was unable to get the types rights.

Currently the example code includes one NON_ACTION action type...

3. How to correctly use namespaced: true module option, and how it affects the usage syntax in ponents?

Currently profile store is configured with namespaced: true. In the App.vue I'm demonstrating it by using mapGetters, which takes a module name as the first parameter. This works.

However, documents module is without this option, because dispatch with the action type doesn't work anymore. It seems to be needing to be used with some other syntax variant which I was unable to find.

PS. Any further code polishing suggestion are much wele as ments, answers, and pull requests!

Update 27/09/20: I just realized VS Code intellisense is not showing type information for the store instance after passing it from useStore function, when used inside ponent. Works if imported in .ts file.

• javascript
• typescript
• vuejs3
• vuex4

Share Follow edited Jan 7, 2021 at 16:24 Roland 27.8k99 gold badges106106 silver badges103103 bronze badges asked Sep 26, 2020 at 17:18 ux.engineerux.engineer 11.4k1515 gold badges6969 silver badges114114 bronze badges 3

• did you watch this recent video from the Kia Kong the vuex creator i hope that it could be helpful – Boussadjra Brahim Commented Sep 26, 2020 at 19:07
• @boussadjra-brahim I did watch that at the conference, however I may have been missed parts of it. Thanks for pointing out, I did watch it again now. So basically we are waiting for Vuex 5 then, but so I guess having TypeScript types working not yet fully with Vuex 4 is fine then. But lets still see if someone has gone further with these typings, so I'll ask for guidance from Vuex repo. – ux.engineer Commented Sep 26, 2020 at 19:51
• ux.engineer, several months have passed since your question, can you please show you current method of working with typescript in Vuex 4? – Gayrat Vlasov Commented Jan 26, 2021 at 1:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

I have published a package to help with using Vuex 4 with Typescript. It's not perfect, but it covers 95% of the issues we had. Any feedback would be appreciated.

It requires TS 4.1+ for the template literal support.

https://www.npmjs./package/typed-vuex-wrapper

FWIW the initial implementation was highly inspired by your start on modules, but expands that, and supports mapState/mapActions, etc with fully typed access. Requires TS 4.1 for the template literal support to allow fully safe namespaced access without magic strings.

本文标签：