ssr的坑和 JSON 理解的纠正

一直以来都觉得undefined可以被JSON.stringify，其实不是。

今天遇到一个bug，事情是项目有个别页面需要使用ssr渲染，直接csr渲染的页面本来功能一切正常，但是从ssr切换过去后，vuex的mapState获取个别数据就不正常了。简化一下state如下：

const state = {
    // 如果selectedValue是其他的值，比如0或者''，那下拉框就不会显示placeholder，索性直接设置成undefined
     selectedValue: undefined, 
     groups: [],
}

vuex的action执行完了，也commit了，从this.$store.state中可以获取selectedValue，但是computed里面mapState不行，而groups是正常的。经过一番排查，初步判定是不能响应式了。然后注意力转移到了window.__INITIAL_STATE__上面，结果发现selectedValue消失了。于是看起来是这样的：

<script>
window.__INITIAL_STATE__ = {
     groups: [],
}
</script>

store.replaceState(window.__INITIAL_STATE__) 时并没有观察selectedValue，，后面给state.selectedValue赋值的时候，其实selectedValue算是新声明的property，并不是响应式的。

于是查看vue-server-renderer的源码是怎么处理state的：

我试了一下JSON.stringify(state)，才恍然大悟, undefined 并不存在于 JSON的定义中。

JSON有四种原始类型：

1.字符串（string）
2.数值（number）
3.布尔（boolean）
4.空（null）

两种结构化类型：

1.对象（object）
2.数组（array）

解决方法

换了一下默认的serialize方法

const serialize = require('serialize-javascript');
options.serializer = (state) => serialize(state, { ignoreFunction: true });

pikou1995 / pikou1995.github.io

ssr的坑和 JSON 理解的纠正 #8