Question

我使用here和here中的hackernews方法设置了vuex和SSR，这一切都正常。

app.js：

// Expose a factory function that creates a fresh set of store, router,
// app instances on each call (which is called for each SSR request)
export function createApp () {
  // create store and router instances
  const store = createStore()
  const router = createRouter()

  // sync the router with the vuex store.
  // this registers `store.state.route`
  sync(store, router)

  // create the app instance.
  // here we inject the router, store and ssr context to all child components,
  // making them available everywhere as `this.$router` and `this.$store`.
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  })

  // expose the app, the router and the store.
  // note we are not mounting the app here, since bootstrapping will be
  // different depending on whether we are in a browser or on the server.
  return { app, router, store }
}

存储/ index.js：

Vue.use(Vuex)

export function createStore () {
  return new Vuex.Store({
    state: {
      activeType: null,
      itemsPerPage: 20,
      items: {/* [id: number]: Item */},
      users: {/* [id: string]: User */},
      lists: {
        top: [/* number */],
        new: [],
        show: [],
        ask: [],
        job: []
      }
    },
    actions,
    mutations,
    getters
  })
}

现在我正在试图找出如何将商店导入lib.js文件，以便我可以进行一些提交，类似于他们尝试做的事情here。

在我设置SSR之前，我只是导出一个新的VuexStore，所以我可以在任何地方导入它。但是对于SSR，您需要使用工厂函数，以便为每个不同的会话创建一个新的商店实例（因此它们不会被其他商店所污染）。它运行正常，但现在我无法将商店导入外部模块，因为它创建了一个新实例。

使用SSR时如何将商店导入模块？

Answer 1

我尝试了here的解决方案，但它对我没用。所以我尝试了下面详细介绍的自己的解决方案，这似乎有效。在store / index.js中添加clientStore的导出

Vue.use(Vuex)

const storeOptions = {
    state: {
        activeType: null,
        itemsPerPage: 20,
        items: {
            /* [id: number]: Item */
        },
        users: {
            /* [id: string]: User */
        },
        lists: {
            top: [
                /* number */
            ],
            new: [],
            show: [],
            ask: [],
            job: []
        }
    },
    actions,
    mutations,
    getters
}

// Factory function for SSR
export function createStore() {
    return new Vuex.Stores(storeOptions)
}

// Client store for client side
export const clientStore = new Vuex.Store(storeOptions)

然后在你的app.js中你可以导入它并像这样使用它

import { clientStore, createStore } from '../store/index'
.
.
.
// Expose a factory function that creates a fresh set of store, router,
// app instances on each call (which is called for each SSR request)
export function createApp () {
    // create store and router instances
    let router
    let store
    if (process.env.VUE_ENV === 'server') {
        router = createRouter()
        store = createStore()
    } else {
        router = createRouter()
        store = clientStore
    }

    // sync the router with the vuex store.
    // this registers `store.state.route`
    sync(store, router)

    // create the app instance.
    // here we inject the router, store and ssr context to all child components,
    // making them available everywhere as `this.$router` and `this.$store`.
    const app = new Vue({
      router,
      store,
      render: h => h(App)
    })

    // expose the app, the router and the store.
    // note we are not mounting the app here, since bootstrapping will be
    // different depending on whether we are in a browser or on the server.
    return { app, router, store }
  }

Answer 2

您位于@/store/index.js的文件正在导出工厂功能。它使Vuex商店。您将要导出在@/app.js

中创建的商店实例

// A singleton Vuex store
export var store

// Expose a factory function that creates a fresh set of store, router,
// app instances on each call (which is called for each SSR request)
export function createApp () {
  // create store and router instances
  const router = createRouter()

  if (!store) store = createStore()

  // sync the router with the vuex store.
  // this registers `store.state.route`
  sync(store, router)

  // create the app instance.
  // here we inject the router, store and ssr context to all child components,
  // making them available everywhere as `this.$router` and `this.$store`.
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  })

  // expose the app, the router and the store.
  // note we are not mounting the app here, since bootstrapping will be
  // different depending on whether we are in a browser or on the server.
  return { app, router, store }
}

在使用带有SSR

2 个答案: