How to better cooperate with Vuex and Vue Router in <script setup></script> in 2.7

[maomincoding]

What problem does this feature solve?

Hello！How to better cooperate with Vuex and Vue Router in <script setup></script> in 2.7？

[kingyue737]

Vuex: Migrate to pinia
Router: vuejs/vue-router#3760

[maomincoding]

@kingyue737 Thanks for your advice.

[tomieric]

I try like this https://github.com/tomieric/vue2.7-playgroud/blob/master/src/router/index.js

[hugo-cardoso]

I developed this simple solution. Maybe it could be useful to someone else.

https://gist.github.com/hugo-cardoso/7c8da4f55d521a6288fc7a0f7d2ff06c

[jkurtz678]

Does anyone have a solution for using Vuex that does not include Pinia and keeps the store calls the same as Vue3?. Hugo's works but I think it changes the syntax too much.

[YFengFly]

Vue router has released version 3.6 to support Vue 2.7:
https://github.com/vuejs/vue-router/blob/dev/CHANGELOG.md

Vuex:

import  {  getCurrentInstance } from 'vue'
export function useStore() {
  const vm = getCurrentInstance()
  return vm.proxy.$store
}

useStore() can only be used in setup.

[vate]

For some reason, when importing using the conventional form:

import { useRoute } from "vue-router";

I get this message in the build (and thus, the app cannot work properly):
export 'useRoute' was not found in 'vue-router'

I'm using

• vue-router 3.6.3
• vue: 2.7.10

Am I misisng something?

[YFengFly]

@vate
https://github.com/vuejs/vue-router/blob/dev/CHANGELOG.md#360-2022-08-22
import { useRoute, useRouter, useLink, onBeforeRouteUpdate onBeforeRouteLeave } from 'vue-router/composables'

[vate]

import { useRoute, useRouter, useLink, onBeforeRouteUpdate onBeforeRouteLeave } from 'vue-router/composables'

Already tried, but I'm getting this message:

This dependency was not found:

* vue-router/composables in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib?[...]

• using vue-cli 4.5.19 (may this be the problem?)

[YFengFly]

In package.json of vue-router 3.6.3:

  "exports": {
    "./composables": {
      "import": "./dist/composables.mjs",
      "require": "./dist/composables.js",
      "types": "./types/composables.d.ts"
    },
  },

In vue-cli 4.5.15, it support for *.mjs is already available.
In Webpack 5, it support Package exports, but in Webpack 4, I don't find it.
I think you should go to vue-router and create a new issue. @vate

[vate]

Thanks for the hint! 🙌🏻

For the record, I managed to make it work using

import { useRoute } from "vue-router/dist/composables.js"

Not the cleanest solution, so I'll follow your advice to post a comment in vue-router.

UPDATE:

Using

import { useRoute } from "vue-router/composables"

worked fine for me on version 3.6.4

[YFengFly]

I'm glad I could give you some ideas.But after looking at router's package.json and its source code,I think we should use the *.mjs file,which is:

import { useRoute } from "vue-router/dist/composables.mjs"

If this works,then this is more recommended.

Update:
router 3.6.4 has supported webpack 4
https://github.com/vuejs/vue-router/blob/dev/CHANGELOG.md#364-2022-08-25