在使用vuex和SSR时将商店导入到lib.js中

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的解决方案，但它没有为我工作。所以我尝试了我自己的解决方案，详细如下，似乎工作。 在店/ 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 } 
    }