Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue3 Support? #36

Open
babalugats76 opened this issue Jan 31, 2021 · 15 comments
Open

Vue3 Support? #36

babalugats76 opened this issue Jan 31, 2021 · 15 comments

Comments

@babalugats76
Copy link

babalugats76 commented Jan 31, 2021

Most definitely not an issue per se, but an important question nevertheless.

Am I tripping or does the current vuex-composition-helpers package not support Vue3?

I tried to implement this bad boy in my Vue3 project today until I ran into dependency issues. When I glanced at the code, I saw a bunch of @vue/composition-api references which leads me to believe that Vue2 is required?

Any clarification would be much appreciated. I would really like to implement this, but my greenfield project is planning on launching with Vue3, Vuex4, and all that jazz.

I have read prior postings about the supposed plan to incorporate this in future Vue/Vuex releases, but, as it stands, none of this great use* stuff, etc., has been added. Has anyone heard more about the incorporation of these helpers?

Thanks for your guys' hard work on this...

@davidmeirlevy
Copy link
Contributor

Look at this package like you use the composition-api plugin for vue2 - you don't need it in vue 3 to use the compositions.

This package actually not needed in vue 3.

Those methods exists at Vuex4, so if you upgrade to vue 3, also upgrade to Vuex 4 and you can get equivalent functionality directly from vuex package.

@babalugats76
Copy link
Author

Thank you for the response.

So are Vuex's map* functions roughly equivalent to your use* functions. Did you use use* prefixing to avoid namespace collisions and/or to be more consistent with other frameworks, e.g., React (hooks...)?

Are you basically saying that I can destructure Vuex's createNamespacedHelpers and obtain access to the same series of "helpers"?

Obviously, you can name anything whatever you want when destructing, etc., but what I am trying to nail down is what is the: it is referred to as "blah" in vuex-composition-helpers and it is referred to as "blah" in Vuex4+.

Hope my point of confusion makes sense.

Thanks in advance!

@davidmeirlevy
Copy link
Contributor

There should be also useX functions at Vuex4, with equivalent behavior to this library.

@babalugats76
Copy link
Author

Thanks for the response! I definitely hear what you are saying, but I am using Vuex 4.0.0 and have used the previous release candidates, and I haven't seen anything but useStore, the mappers, the namespaceHelper thingy, etc.

Admittedly, this could be "user error" on my behalf--wouldn't be the first time :) --but could you take a moment to throw me a bone? Where exactly are the equivalent use* functions under https://github.com/vuejs/vuex/tree/4.0?

Thanks in advance!

@davidmeirlevy
Copy link
Contributor

I started this package after I tried to contribute those abilities to Vuex3, and the only reason this wasn't merged into Vuex3 is because they wrote that they will have those abilities on Vuex4.
They even looked at this package and told me that this is the solution they attend to include in Vuex4.

So if they won't do it, maybe it's time to create a "@next" version of this package that will run on Vue3 and Vuex4 directly.
This shouldn't be so difficult.. mostly unit tests updates and to change the per dependencies.

Would you like to contribute this change?

@babalugats76
Copy link
Author

Thanks! I can definitely contribute in terms of end user testing, etc. You probably don't want me updating the code, which would be, ostensibly, minor. :)

More importantly, I think it would be a good exercise to determine the key differences between the proposed "@next" helpers and what has been--and shall be--provided as part of Vuex 4. Best I can tell, vuex-composition-helpers provides a couple of, IMHO, key pieces of functionality, e.g., wrapping state in computed, that Vuex 4's mappers/namespace helpers simply do not consider.

To your point, in an ideal world, Vuex 4 would incorporate the many valuable bits of functionality you have put forth. This has to be "Option A". Vuex 4 already has a place for helpers and some half-baked mappers, so it would be ideal if they simply provided ones with this kind of functionality. In my opinion, your solution is well thought out and abstracted intelligently.

So, I guess, what I am saying is: is there a way to start by determining the delta, functionality-wise, and somehow submitting feature requests that could be more or less officially shot down or ignored? Can a comprehensive feature list be created of what Vuex 4 is missing relative to vuex-composition-helpers in the hopes of improving Vuex and its convenience of use?

@davidmeirlevy
Copy link
Contributor

OK i finished it.. this should work with vue3 and vuex4:
https://www.npmjs.com/package/vuex-composition-helpers/v/next

use this command to install this version:

npm install vuex-composition-helpers@next

or update your package.json dependencies to use "vuex-composition-helpers": "^2.0.0".
notice that this version requires both vue3 and vuex4.

enjoy :)

@babalugats76
Copy link
Author

Awesome! Thank you so much for doing that. I will incorporate into my project shortly...

@oliv3
Copy link

oliv3 commented May 23, 2021

@davidmeirlevy Hi, I tried upgrading to ^2.0.0 but I get this error:

Failed to compile.

./node_modules/vuex-composition-helpers/dist/util.js 52:20
Module parse failed: Unexpected token (52:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         throw new Error('You must use this function within the "setup()" method, or insert the store as first argument.');
|     }
>     return vm.proxy?.$store;
| }
| //# sourceMappingURL=util.js.map

Any idea ? Thanks !

@davidmeirlevy
Copy link
Contributor

@oliv3 you might not using esnext syntax support.

@oliv3
Copy link

oliv3 commented May 23, 2021

I tried adding esnext and esnext-loader using yarn, but same result.

@oliv3
Copy link

oliv3 commented May 24, 2021

For the record, adding transpileDependencies: ['vuex-composition-helpers'] to vue.config.js did the trick.

@vnues
Copy link

vnues commented Sep 29, 2021

OK i finished it.. this should work with vue3 and vuex4: https://www.npmjs.com/package/vuex-composition-helpers/v/next

use this command to install this version:

npm install vuex-composition-helpers@next

or update your package.json dependencies to use "vuex-composition-helpers": "^2.0.0". notice that this version requires both vue3 and vuex4.

enjoy :)

Originally, I also wanted to fork a copy to support vue3, but I didn’t expect it to be supported. It is recommended to add to README. In addition, vuex4 does not support useX until now.

@davidmeirlevy
Copy link
Contributor

@vnues if you would like to add this to the readme if the main branch, it will be awesome!

Thanks!

@vnues
Copy link

vnues commented Oct 12, 2021

@vnues if you would like to add this to the readme if the main branch, it will be awesome!

Thanks!

I fork the source code of vue3-next and refactored it. Now it is used in the company. It mainly fixes some problems such as ts and uses rollup to build. If you need it, I will mention a pr

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants