javascript - Erreur d'actualisation de la page de valeur de routage liée à vue localStorages

Question

Code lié :

Je commence tout juste à apprendre Vue, et mes bases js ne sont pas très bonnes. S'il y a quelque chose qui ne va pas, n'hésitez pas à le critiquer et à le signaler, merci.

La page productList saute, puis les données du tableau json local sont prises en fonction de la valeur d'index pour afficher différentes données de page. Il n'y a aucun problème après avoir cliqué pour sauter, mais après l'actualisation, la valeur ne peut pas être obtenue, invite

.

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

J'ai cherché l'explication du message d'erreur mais je ne le comprends toujours pas. J'ai suivi la méthode de sauvegarde des stockages locaux dans un tutoriel de base sur Vue dans MOOC. Ai-je écrit quelque chose de mal quelque part ?

 <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

Il y a une forte probabilité que le format json soit erroné.
Tout d'abord, vous devez juger où se trouve l'erreur.

1. Premièrement annoter tous montés

2. Vérifiez s'il y a des erreurs

3. Puis ajoutez-les un par un

Si vous utilisez Chrome, vous pouvez voir la valeur de localStorage en ouvrant f12 et en accédant à l'application

La raison la plus probable est que vous obtenez des données non-json avant de sauvegarder les données au format json, puis json.parse signale une erreur