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 in 2.7？

[kingyue737]

Vuex: Migrate to pinia Router: https://github.com/vuejs/vue-router/issues/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

[mohammedzamakhan]

@YFengFly I tried the useStore that you suggested in https://github.com/vuejs/vue/issues/12651#issuecomment-1223450798, it worked, but I was not able to listen to changes from the store, I used computed, but it doesn't update when the store gets updated

const userData = computed(() => store.getters['authentication/userData'])

Any suggestions here?

[YFengFly]

@mohammedzamakhan Sorry for not replying for so long! this is very weird, I have tried computed, but nothing works. I wanted to reply after finding a solution, but I don't have a good idea at present. feel very sorry

[humoyun91]

I think Vue core team should provide clear and detailed guide in terms of how to use vuex@4 and vue-router@4 with [email protected], if Composition API is supported in [email protected] then other official packages should support this as well