javascript - halaman nilai penghalaan berkaitan vue localStorages ralat penyegar semula

Question

Kod berkaitan:

Saya baru mula belajar Vue, dan asas js saya tidak begitu bagus Jika ada yang salah, jangan segan untuk mengkritik dan menunjukkannya, terima kasih.

Halaman productList melompat, dan kemudian data dalam tatasusunan json tempatan diambil mengikut nilai indeks untuk memaparkan data halaman yang berbeza Tidak ada masalah selepas mengklik untuk melompat, tetapi selepas menyegarkan, nilai tidak dapat diperoleh, segera

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

Saya mencari penjelasan tentang mesej ralat tetapi masih tidak memahaminya. Saya mengikuti kaedah menyimpan localStorages dalam tutorial asas tentang Vue dalam MOOC.

 <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

Terdapat kebarangkalian tinggi bahawa format json adalah salah
Pertama sekali, anda harus menilai di mana ralatnya

1. Anotasi dahulu semua yang dipasang

2. Lihat jika terdapat sebarang kesilapan

3. Kemudian tambahkan satu persatu

Jika anda menggunakan chrome, anda boleh melihat nilai localStorage dengan membuka f12 dan pergi ke aplikasi

Sebab yang paling mungkin ialah anda memperoleh data bukan json sebelum menyimpan data dalam format json, dan kemudian json.parse melaporkan ralat