Javascript – Vue LocalStorages-bezogene Routing-Werteseite aktualisiert Fehler

Question

Codebezogen:

Ich fange gerade erst an, Vue zu lernen, und meine js-Grundlage ist nicht sehr gut. Wenn etwas nicht stimmt, können Sie es gerne kritisieren und darauf hinweisen, danke.

Die ProductList-Seite springt, und dann werden die Daten im lokalen JSON-Array entsprechend dem Indexwert verwendet, um verschiedene Seitendaten anzuzeigen. Nach dem Klicken zum Springen gibt es kein Problem, aber nach dem Aktualisieren kann der Wert nicht abgerufen werden, Eingabeaufforderung

[Vue warn]: Error in data(): "SyntaxError: Unexpected token u in JSON at position 0"

Ich habe nach der Erklärung der Fehlermeldung gesucht, verstehe sie aber immer noch nicht ganz. Ich habe die Methode zum Speichern von localStorages in einem grundlegenden Tutorial zu Vue in MOOC befolgt.

 <li v-for="(item,index) in filterList" >
    <router-link :to="{ name: 'detail', params: { id: index }}">
    </router-link>
</li>

//store.js
const STORAGE_KEY = 'epmobile'
export default {
    fetch() {
        return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
    },
    save(items) {
        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
    }
}

//detail 页面
<script>
import Store from '../store/store'
export default {
    data() {
        return {
            articleList: '',
            index: Store.fetch()
        }
    },
    mounted() {
        this.$nextTick(function () {
            this.index = this.$route.params.id
            this.get_articleList()
        })
    },
    watch: {
       index: {
           handler: function (index) {
            Store.save()
           },
           deep: true
       }
    },
    methods: {
        get_articleList: function () {
            this.$http.get('/api/article.json').then(response => {
                let res = response.data
                if (res.status == 0) {
                    this.articleList = res.result.articleList[this.index]
                }
            })
        }
    }
}
</script>

{
    "status": 0,
    "result": {
        "articleList": [
            {
                "title": "111",
                "productImg": "/static/images/product_e/01.jpg",
                "productText": "xxxxx",
                "companyInfo": {
                    "name": "xxxx",
                    "url": "xxxxx",
                    "boothNumber": "xxxx"
                }
            },
            {
                "title": "2222222222",
                 以下省略...
            }
        ]
    }
}

Answer 1

大概率是json格式错误
首先你去判断一下错误出在哪里

1. 先把mounted全部注释

2. 看看会不会报错

3. 然后一条一条的加进去

localStorage的值如果你使用的chrome，打开f12在application那里就能看到

大概率出现的原因是，你在一json格式保存数据之前先获取了一个非json数据，然后json.parse就报错了