问如何将v模型的值设置为getter？

EN

<textarea
 v-model="blogById.htmlCode"
 cols="30"
 rows="10"
 spellcheck="false"
></textarea>

import { mapGetters } from "vuex";

export default {
  name: "CodeEditor",
  data() {
    return {
      htmlCode: this.blogPost.htmlCode,
      cssCode: "",
      jsCode: "",
      styleBegin: "<style>",
      styleEnd: "</style>",
      scriptBegin: "<script>",
      scriptEnd: "</" + "script>",
    };
  },
  methods: {
    writeCode() {
      var doc = document.getElementById("myframe").contentWindow.document;
      doc.open();
      doc.write(
        this.htmlCode +
          this.styleBegin +
          this.cssCode +
          this.styleEnd +
          this.scriptBegin +
          this.jsCode +
          this.scriptEnd
      );
      doc.close();
    },
  },
  mounted() {
    this.writeCode();
    let code = this.$refs.htmlCode.value;
  },
  props: {
    id: {
      required: true,
    },
  },
  computed: {
    ...mapGetters({
      blogById: "blogById",
    }),
    blogById() {
      return this.blogById(this.id);
    },
  },
};

import { createStore } from 'vuex';

export default createStore({
    state: {
        cards: [{
                title: "Blog 1",
                htmlCode: "This is blog 1 htmlCode",
                cssCode: "This is blog 1 cssCode",
                jsCode: "This is blog 1 jsCode",
                index: 1,
            },
            {
                title: "Blog 2",
                htmlCode: "This is blog 2 htmlCode",
                cssCode: "This is blog 2 cssCode",
                jsCode: "This is blog 2 jsCode",
                index: 2,
            },
            {
                title: "Blog 3",
                htmlCode: "This is blog 3 htmlCode",
                cssCode: "This is blog 3 cssCode",
                jsCode: "This is blog 3 jsCode",
                index: 3,
            },
            {
                title: "Blog 4",
                htmlCode: "This is blog 4 htmlCode",
                cssCode: "This is blog 4 cssCode",
                jsCode: "This is blog 4 jsCode",
                index: 4,
            },
            {
                title: "Blog 5",
                htmlCode: "This is blog 5 htmlCode",
                cssCode: "This is blog 5 cssCode",
                jsCode: "This is blog 5 jsCode",
                index: 5,
            },
            {
                title: "Blog 6",
                htmlCode: "This is blog 6 htmlCode",
                cssCode: "This is blog 6 cssCode",
                jsCode: "This is blog 6 jsCode",
                index: 6,
            },
            {
                title: "Blog 7",
                htmlCode: "This is blog 7 htmlCode",
                cssCode: "This is blog 7 cssCode",
                jsCode: "This is blog 7 jsCode",
                index: 7,
            },
        ],
    },
    getters: {
      blogById: (state) => (index) => {
         // cast both to Number() to prevent unexpected type-mismatch
         return state.cards.find(c => Number(c.index) === Number(index));
      },
    },
});