javascript - markdown-it的render函数渲染不出来是什么原因？

Question

const str = '# test \n\n'
const mdi = new MarkdownIt()
mdi.render(str)

像这样是能渲染的，
如果把str存到pinia store里面，然后页面加载的时候取出来用markdown-it来渲染,发现没有变成html而是直接输出了原文本。

我发现好像字符会转义，比如\n会变成\\n。
但是用decodeURIComponent或者直接用正则来转换成\n却没有用。

有人知道怎么做才能成功渲染存在pinia store里的字符串吗？

做了一个测试：
我把vue-devtools里显示的值和渲染没成功原样输出的文本都复制到vscode一个新窗口。神奇的事是，vue-devtools里复制的存在pinia store的值，虽然在工具里显示是\n,但是到了vscode里变成了\\n.而从网页上复制出来的文本，\n还是\n没有变成\\n.

Answer 1

// src/store/index.js
import { createPinia } from 'pinia';


export const useStore = createPinia();



// src/store/content.js
import { defineStore } from 'pinia';

export const useContentStore = defineStore({
  id: 'content',
  state: () => ({
    markdownContent: '# test \n\n',
  }),
});

在组件里用 pinia store 和 markdown-it：

<!-- src/App.vue -->
<template>
  <div id="app">
    <div v-html="renderedMarkdown"></div>
  </div>
</template>

<script>
import { useContentStore } from './store/content';
import MarkdownIt from 'markdown-it';

export default {
  computed: {
    renderedMarkdown() {
      const contentStore = useContentStore();
      const mdi = new MarkdownIt();
      return mdi.render(contentStore.markdownContent);
    },
  },
};
</script>

Answer 2

存储到pinia前转成base64字符试下，从pinia取出来后再解base64