如何在express-vue中集成Vuex？求SSR项目全局配置方案

嘿，我刚好折腾过在express-vue里集成Vuex，给你唠唠具体怎么弄：

一、Vuex集成（CDN或服务端+客户端配合模式） #

首先得明确：express-vue是SSR框架，所以Vuex要同时在服务端渲染和客户端hydrate时生效，代码位置得两边兼顾：

1. 服务端：每次请求创建独立的Store实例 #

服务端不能用单例Store，不然会跨请求污染数据。你可以在express的主文件里这么写：

// 服务端用npm安装vue和vuex就行，node环境能直接访问node_modules
const Vue = require('vue')
const Vuex = require('vuex')
const ExpressVue = require('express-vue')

Vue.use(Vuex)

// 封装一个创建Store的函数，每次请求调用一次
function createStore() {
  return new Vuex.Store({
    state: { count: 0 },
    mutations: {
      increment(state) {
        state.count++
      }
    }
  })
}

// 在路由里使用
app.get('/', (req, res) => {
  const store = createStore()
  // 把store传给express-vue的配置
  const vueInstance = new ExpressVue({
    template: 'path/to/your/template.vue',
    store: store,
    // 其他配置：data、head等
  })

  vueInstance.render(req, res, (err, html) => {
    if (err) return res.status(500).send(err.message)
    // 关键：把服务端的初始状态注入到HTML里，供客户端同步
    const finalHtml = html.replace(
      '</body>',
      `<script>window.__INITIAL_STATE__ = ${JSON.stringify(store.state)}</script></body>`
    )
    res.send(finalHtml)
  })
})

2. 客户端：同步服务端状态并挂载Store #

如果用CDN，先在页面里引入Vue和Vuex的CDN脚本（要放在你的客户端代码之前），然后写客户端入口文件：

// 客户端代码，比如client.js
const store = new Vuex.Store({
  // 用服务端注入的初始状态，保证前后端状态一致
  state: window.__INITIAL_STATE__,
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 挂载到根Vue实例（express-vue渲染的根元素一般是#app）
new Vue({
  el: '#app',
  store,
  // 其他配置
})

然后把这个client.js通过script标签引入到你的模板里就行。

3. 组件和混入里使用Vuex #

只要Store挂载到了Vue实例上，不管是组件还是混入，都能直接通过this.$store访问。比如：

// 组件里的方法
methods: {
  addCount() {
    this.$store.commit('increment')
  }
}

// 混入里也一样
const myMixin = {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

如果想用mapState、mapMutations这类辅助函数，记得在客户端和服务端都要引入（CDN的话Vuex会全局暴露这些方法）。

二、关于express-vue使用npm包的建议 #

你说express-vue无法访问node_modules？其实是客户端代码没法直接用node_modules里的包，服务端是完全可以的。要让客户端也能用npm包，你需要加个打包步骤：

• 用webpack/rollup把客户端代码（包括Vuex、自定义组件等）打包成一个bundle.js
• 在express-vue的模板里引入这个打包后的文件
• 服务端依然直接require npm包就行

这样做的好处是版本可控，比CDN更稳定，还能按需引入代码。比如你可以把客户端的Store、Vue实例、组件都打包在一起，不用零散的CDN脚本。

内容的提问来源于stack exchange，提问作者telion