Skip to content

Migration to Vue 3 and Vuex 4 (supported by TypeScript-Demo-SPA) #54

@DrFacepalm

Description

@DrFacepalm

Currently PolyKey is using vue 2, but a... couple of weeks ago, vue 3 was released and there's a few changes that need to be made.

I'm not sure how much of the frontend work I've done with vue 3 will translate to the electron based work that is PolyKey, so I'll just cover the differences I can see as of right now. Also, it seems like you're using vuex-class which doesn't seem to support vue 3, so there's a lot of differences.

The typescript-demo-spa should be using the composition API which provides reactive states within components and helpful hooks. https://v3.vuejs.org/api/composition-api.html#setup introduces the idea.

Vuex 4 also brings some changes to the table, and I'm still figuring out some parts but I'll go over what I know.
Mutations, Actions, Getters and State are all now strongly typed in typescript, and it doesn't seem like vuex-module-decorators is supporting Vuex 4 yet. https://dev.to/3vilarthas/vuex-typescript-m4j and vuejs/vuex#994 explains the reasoning behind this, and why the $store is now manually declared. It also has an example of how to set it all up. As expected the store can be called from the vue components using a useStore hook. The article shows this more in depth.
The idea behind Mutations, Actions, Getters seems to remain the same but they are just defined in a much more verbose way without the decorators, so all the functionality should be able to remain. That said, I haven't yet looked into how to get namespaced modules in Vuex 4 though it seems like there is a way.

I can also see that you're using webpack but it seems to be an electron thing and I can't see any similarities to the webpack I've been using so there isn't much to to say there.

Vue dependencies that have been updated:

  • "vue": "^2.6.11" -> "vue": 3.0.0
  • "vuex": "^3.4.0" -> "vuex": 4.0.0-beta.4

Not yet updated for vue 3:

@CMCDragonkai @robert-cronin

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions