在使用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 } 
    }