vue3在router中使用store报错的完美解决方案

import { mainStore, useStore } from "@/store";
import { createApp } from 'vue'
import App from '../../App.vue'
import { createPinia } from "pinia";
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
const store = mainStore();
console.log('zxc', store.msg)

npm install vue-router vuex --save
# 或者
yarn add vue-router vuex

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
const router = createRouter({
  history: createWebHistory(),
  routes: [...]
})
const app = createApp(App)
app.use(router)
app.mount('#app')

import { defineAsyncComponent } from 'vue'
import Home from './views/Home.vue'
const About = defineAsyncComponent(() => import('./views/About.vue'))
const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

import { createStore } from 'vuex'
const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
})

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'
const store = createStore({
  state: {...},
  mutations: {...},
  actions: {...},
})
const app = createApp(App)
app.use(store)
app.mount('#app')

<template>
  <div>
    <h1>{{ $route.path }}</h1>
    <p>Count: {{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">Increment</button>
    <button @click="$store.dispatch('incrementAsync')">Increment Async</button>
  </div>
</template>