javascript - Erreur d'actualisation de la page de valeur de routage liée à vue localStorages
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",
以下省略...
}
]
}
}
