Comment intégrer le magasin Vuex dans le routeur dans l'application Vue 3 SSR ?

Question

J'ai un projet Vue3 utilisant SSR, Vue-Cli, Vuex et Typescript. Dans la page de routage, je dois soumettre des données dans VuexStore. Dans le fichier .vue, je peux simplement utiliser this.$store, qui est défini par type dans vuex.d.ts comme ceci : this.$store.commit("setFoo","Bar") mais sans ceci Ou le fichier ts de l'instance vue (route

P粉693126115 · Answer

Votre export par défaut est une fonction

export default function () {

Je pense que ce que tu veux faire est ceci :

export default new Vuex.Store({...})

Si vous souhaitez le conserver en tant que fonction, vous pouvez également essayer store().commit mais chaque appel à store() créera une nouvelle instance Vuex

P粉811349112 · Answer

Veuillez noter que Évitez les singletons avec étatLa règle s'applique non seulement à l'instance principale de l'application et au stockage, mais également au routeur

Votre Router/index.ts actuel crée un singleton avec état. Vous devez créer une fonction « usine de routeurs » afin que chaque requête du serveur reçoive une nouvelle instance de routeur. Un autre avantage est que vous pouvez désormais lui transmettre une instance de stockage

Router/index.ts

  import { createRouter, createWebHistory, createMemoryHistory } from "vue-router"
  import axios from "axios"
  import MockAdapter from "axios-mock-adapter"
  import { routes } from "./routes"
  import { isSSR } from "@/helpers"

  const createHistory = isSSR()
    ? createMemoryHistory
    : createWebHistory

  export default function (store) {
    const router = createRouter({ 
      routes, 
      history: createHistory(process.env.BASE_URL)
    })

    router.beforeEach(async (to, from, next) => {
      // do stuff with store (store comes from argument)
    })
  
    return router
  }

Veuillez noter que les bundles serveur et client doivent utiliser createSSRApp - si vous utilisez le standard createApp, createSSRApp - 如果使用标准的createAppl'hydratation du client ne fonctionnera pas correctement

main.js

import { createSSRApp, h } from "vue"
import { isSSR } from "@/helpers"
import createRouter from "@/router"
import createStore from "@/store"
import axios from "axios"
import VueAxios from "vue-axios"
import App from "@/App.vue"

export default function () {

  const rootComponent = {
    render: () => h(App),
    components: { App },
  }

  const app = createSSRApp(rootComponent)
  const store = createStore()
  const router = createRouter(store)

  app.use(VueAxios, axios)
  app.use(router)
  app.use(store)

  app.provide("axios", app.config.globalProperties.axios)

  return {
    app,
    router,
    store,
  }
}

Comment intégrer le magasin Vuex dans le routeur dans l'application Vue 3 SSR ?

répondre à tous(2)je répondrai