this.$store 在 Vue3 中未定义，带有 Vuex4 存储和路由器

Question

我正在尝试使用 Vuex4 商店设置 Vue3 应用程序，但我似乎无法在任何组件中访问该商店，总是出现一些未定义的错误。 我尝试了许多其他解决方案，但是当我 go 最终测试时，我似乎一直在循环运行，所以我觉得这是我所缺少的一些简单的东西。

main.ts：

import App from "./App.vue";
import { createApp } from "vue";
import createRouter from "@/router"
import createStore from "@/store"

const app = createApp(App);
const store = createStore();
const router = createRouter(app, store);
app
  .use(store)
  .use(router);

router.isReady().then(() => {
  app.mount('#app');
});

路由器/index.ts：

import { createRouter, createWebHistory } from "vue-router"
import AppLayout from '../layouts/AppLayout.vue'
import { App } from 'vue';

export default function (app: App, store: any) {
  const routes = [
    {
      path: "/",
      component: AppLayout,
      children: [
        {
          path: '',
          component: () => import('../views/Dashboard.vue'),
        },
        {
          path: 'accounts',
          component: () => import('../views/Accounts.vue'),
        },
      ]
    },
  ]
  const router = createRouter({ 
    routes,
    history: createWebHistory()
  })

  return router
}

存储/索引.ts：

import { createStore } from "vuex"

const store = {
  state: () => ({
    foo: "bar",
  })
}

export default function () {
  return createStore(store)
}

视图/仪表板.vue

<script>
// ??? all some variation of undefined
// console.log(this.$store)
// console.log(this.store)
// console.log(store)

// import { useStore } from "vuex";
// const store = useStore();
// console.log(store)
</script>

Answer 1

你试过这样调试吗？

<script>
export default {
  mounted() {
    console.log(this.$store);
  },
};
</script>

您的设置似乎没问题，但是在组件上，您应该能够从选项 API 的内部export default中获取存储。 如果使用合成，那么你需要这样做

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
  }
}