Open pikou1995 opened 4 years ago
一直以来都觉得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 });
一直以来都觉得undefined可以被JSON.stringify,其实不是。
今天遇到一个bug,事情是项目有个别页面需要使用ssr渲染,直接csr渲染的页面本来功能一切正常,但是从ssr切换过去后,vuex的mapState获取个别数据就不正常了。简化一下state如下:
vuex的action执行完了,也commit了,从this.$store.state中可以获取selectedValue,但是computed里面mapState不行,而groups是正常的。经过一番排查,初步判定是不能响应式了。 然后注意力转移到了window.__INITIAL_STATE__上面,结果发现selectedValue消失了。于是看起来是这样的:
store.replaceState(window.__INITIAL_STATE__) 时并没有观察selectedValue,,后面给state.selectedValue赋值的时候,其实selectedValue算是新声明的property,并不是响应式的。
于是查看vue-server-renderer的源码是怎么处理state的:
我试了一下JSON.stringify(state),才恍然大悟, undefined 并不存在于 JSON的定义中。
JSON有四种原始类型:
两种结构化类型:
换了一下默认的serialize方法