如何将Vue项目的Vuex store导出为文本文件并导入到Vue组件库中

你之前序列化失败是因为操作的是Vuex实例对象，包含了大量不可序列化的方法属性，实际上你只需要序列化state纯数据部分即可，实现逻辑非常简单：

步骤1：Web应用端导出状态快照 #

仅取$store.state做序列化，它本身就是不含函数的纯数据对象，可直接转为JSON文本文件：

// Web应用侧导出触发逻辑（比如点击导出按钮时执行）
const stateJson = JSON.stringify(this.$store.state, null, 2)
// 生成文本文件下载
const blob = new Blob([stateJson], { type: 'application/json' })
const downloadUrl = URL.createObjectURL(blob)
const aTag = document.createElement('a')
aTag.href = downloadUrl
aTag.download = 'chatbot-state.json'
aTag.click()
URL.revokeObjectURL(downloadUrl)

步骤2：组件库侧导入状态生成store #

因为两个项目的store结构完全一致，你只需要把Web应用的整套store代码（store文件夹下的index.js和所有modules文件）直接复制到组件库项目中，再修改store初始化逻辑支持传入初始状态即可：

// 组件库侧 store/index.js 代码
import Vue from 'vue'
import Vuex from 'vuex'
// 导入所有和Web应用完全一致的模块
import dataApi from './modules/data_api'
import dataArrow from './modules/data_arrow'
import dataAvatar from './modules/data_avatar'
// ...其余模块全部照搬Web应用的配置

Vue.use(Vuex)
const modules = {
  dataApi,
  dataArrow,
  dataAvatar,
  // ...其余模块注册
}

// 导出可传入初始状态的store创建方法
export function createStore(initialState = {}) {
  // 把导入的状态合并到对应模块的默认state上
  Object.keys(initialState).forEach(moduleName => {
    if (modules[moduleName]) {
      modules[moduleName].state = Object.assign({}, modules[moduleName].state, initialState[moduleName])
    }
  })
  return new Vuex.Store({ modules })
}

组件库初始化Vue实例时，导入之前导出的JSON文件传入即可：

// 静态导入JSON文件，也可以根据需求动态读取本地文本文件
import importedState from './chatbot-state.json'

new Vue({
  store: createStore(importedState),
  vuetify: new Vuetify(),
  components: {
    chatbot: lib_chatbot_beta
  }
}).$mount('#app')

如果后续需要频繁迭代store逻辑，可以把整套store代码抽成独立的公共代码模块，Web应用和组件库同时依赖该公共模块，不用两边复制代码，避免结构不一致的问题。

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