掘金的网站是vue ssr来做的,它的数据没有放到window.__INITIAL_STATE__，怎么做到的

Question

如题了，最近的项目也要用vue ssr来做，然后seo提出了需求，就是希望数据不要放到_INITAL_STATE_里面，看了下掘金，应该是放到了<div id="jjis" style="display:none;" data-state="数据"></div>下面
请问要怎么改造呢？

Answer 1

在服务端渲染的时候，只要把context.state的数据取出来。然后加密下，注入到页面中。就好了。

        
        加密
     // 取出store数据信息
    let renderState = JSON.stringify(context.state);
    // 加密字符串数据
    renderState = CryptoJS.encrypt(renderState);
    // 将数据填入到dom节点中
    let newString = JSON.stringify(appString);
    newString = newString.replace(/data-store-kans-cce-group/g, renderState);
    newString = JSON.parse(newString);
    
    
    解密
    const kanId = document.getElementById('kans-store-only-id');
    if (kanId) {
        const orginData = kanId.getAttribute('data-state');
        let decryptData = JSON.parse(CryptoJS.decrypt(orginData));
        console.log(typeof decryptData);
        if (typeof decryptData == 'string') {
            decryptData = JSON.parse(decryptData);
        }
        if (decryptData) {
            store.replaceState(decryptData);
        } else {
            throw ('store error');
        }