он не отображает результат Axios, пожалуйста

#javascript #vue.js #rendering #render #mutation

#javascript #vue.js #рендеринг #визуализация #мутация

Вопрос:

я использую vue 3, SshPre для цвета строки

 <div class="fileContent" >
            <!-- <ssh-pre language="js" copy-button @copied="onCopiedDoSomething"  label="Javascript" dark=true><pre>{{this.$store.state.git.decodeData}}</pre></ssh-pre> -->
            <ssh-pre language="js"  copy-button label="Javascript" dark=true >
                <pre>{{this.$store.state.git.decodeData}}</pre></ssh-pre>
</div>

в store.js

 // in .vue file
...mapMutations({
            setDecodeData : 'git/setDecodeData',
        }),

// in store.js 
setDecodeData(state, data){
          state.decodeData = data
},

функции setdata

 sendContent(e){
            this.axios.get(`${e.url}`, {
                    headers : {
                        Authorization : `token ${key}`
                    }
            })
            .then( res => {
                console.log(res)
                this.encodedData = res.data.content
                this.decodeData()
            })
        },

decodeData(){
            this.setDecodeData( decodeURIComponent(escape(window.atob(this.encodedData)))) 
        },

таким образом, div.fileContent в тегах ssh-pre не отображается в реальном времени

но этот тег может принимать рендеринг в реальном времени

 <pre>{{this.$store.state.git.decodeData}}</pre>

как я могу это исправить?? пожалуйста, помогите мне ~~

Ответ №1:

В шаблоне вам не нужно использовать $this, чтобы удалить это. И используйте mapGetters из vuex, если вы хотите иметь реактивность с хранилищем в вашем шаблоне. Настройте геттеры в своем хранилище и получите доступ к ним в вашем computed, которые будут отслеживать любые изменения и обновлять dom.

В магазине:

 const getters = {
  getDecodeData: (state) => state.decodeData
}

В макете:

 computed: {
    ...mapGetters([
      getDecodeData
    ])
  }

<pre>{{getDecodeData}}</pre>

Для справки вы можете прочитать здесь: https://vuex.vuejs.org/guide/getters.html#method-style-access