[Vuejs]-Importing store into a lib.js while using vuex with SSR

by

3👍

✅

Your file at @/store/index.js is exporting a factory function. It makes Vuex stores. You will want to export the store instance that you created in @/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 }
}
👤matpie

1👍

I tried the solution from here but it didn’t work for me. So I tried my own solution detailed below which seems to be working.
In store/index.js add an export of 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)

Then in your app.js you can import it and use it like so

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 }
  }
👤Amrit Kahlon

Leave a comment