greenpress / vuex-composition-helpers

A util package to use Vuex with Composition API easily.
https://www.npmjs.com/package/vuex-composition-helpers
MIT License
288 stars 32 forks source link

Vue3 Support? #36

Open babalugats76 opened 3 years ago

babalugats76 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

babalugats76 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

oliv3 commented 3 years ago

@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 commented 3 years ago

@oliv3 you might not using esnext syntax support.

oliv3 commented 3 years ago

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

oliv3 commented 3 years ago

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

vnues commented 2 years ago

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 commented 2 years ago

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

Thanks!

vnues commented 2 years ago

@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