javascript - vue localStorages related routing value page refreshes error

Question

Code related:

I am just starting to learn Vue, and my js foundation is not very good. If there is anything wrong, feel free to criticize and point it out, thank you.

The productList page jumps, and then the data in the local json array is taken according to the index value to display different page data. There is no problem after clicking to jump, and then the value cannot be obtained after refreshing, prompt

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

I searched for the explanation of the error message but still don’t quite understand it. I followed the method of saving localStorages in a basic vue tutorial in MOOC. Did I write it wrong somewhere?

 <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

There is a high probability that the json format is wrong.
First of all, you should judge where the error is.

1. First annotate all mounted

2. See if there are any errors

3. Then add them one by one

If you are using chrome, you can see the value of localStorage by opening f12 and going to application

The most likely reason is that you obtain non-json data before saving the data in json format, and then json.parse reports an error