将 vuex 与 SSR 一起使用时将商店导入 lib.js

Question

我使用 here and 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 }
}

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 }
}

将 vuex 与 SSR 一起使用时将商店导入 lib.js

Importing store into a lib.js while using vuex with SSR

vue.js

vuejs2

vuex

server-side-rendering