Les composants Nuxtjs Page ne sont pas mis à jour même si le magasin vuex est mis à jour

Question

J'utilise nuxtjs pour un projet de rendu côté serveur. J'ai une API REST d'où je voudrais mettre à jour le magasin Vuex et afficher la page. In the nuxtjs documentation for using Vuex store, it mentions using fetch api of the pages. J'essaie donc d'aller chercher la liste des articles pour l'API et de rendre la page.

Vuex magasin:

const createStore =() => { 
    return new Vuex.Store({ 
    state: { 
     article_list: [] 
    }, 
    mutations: { 
     updateArticleList (state, payload) { 
     state.article_list = payload 
     console.log('article list length', state.article_list.length) 
     } 
    }, 
    actions: { 
     mutateArticleList ({commit}, payload) { 
     api.get_articles() 
      .then((data) => { 
      commit('updateArticleList', data) 
      }) 
     } 
    } 
    }) 
} 

Dans les pages/index.vue:

<template> 
    <div> 
    <button @click="update">Update</button> 
    <p v-for="article in articles" :key="article.id">Article</p> 
    </div> 
</template> 

<script> 
    export default { 
    fetch ({store}) { 
     store.dispatch('mutateArticleList') 
    }, 
    computed: { 
     articles() { 
     return this.$store.state.article_list 
     } 
    }, 
    methods: { 
     update() { 
     this.$store.dispatch('mutateArticleList') 
     } 
    } 
    } 
</script> 

Sur la console, je peux voir qui a été mis à jour

console.log('article list length', state.article_list.length) // 16 

de article_list du magasin Mais sur la page index.vue, il n'y a pas d'articles. Même sur la console de la méthode d'index created la article_list est 0

console.log('index created length', this.$store.state.article_list.length) // 0 

Qu'est-ce que je manque ici? Pourrais-tu m'aider s'il te plaît.

Answer 1

Puisque le magasin vex est réactif, vous pouvez récupérer l'état d'un magasin en le retournant dans une propriété privée calculée. Voir getting vuex state into components

ce que vous faites est:

<tag-contents v-for="article in $store.state.article_list" :key="article.id"></tag-contents> 

font place ceci:

<template> 
    ... 
    <tag-contents v-for="article in articles" :key="article.id"></tag-contents> 
    ... 
</template> 

<script> 
export default { 
    ... 
    fetch ({store, params}) { 
     api.get_articles() 
      .then((data) => { 
       store.dispatch('mutateArticleList', data) 
      }) 
    }, 
    created() { 
     console.log('index created length', this.$store.state.article_list.length) 
    }, 
    computed:{ 
     articles(){ 
      return this.$store.state.article_list; 
     } 
    } 
} 
</script> 

chaque fois que l'état du magasin est mis à jour le prperty calculé articles est réévaluées et cuases les DOM pour mettre à jour

Encore une chose à mentionner:

Puisque les actions sont pour des tâches asynchrones, vous pouvez déplacer votre logique de récupération RESTapi dans votre action mutateArticleList et commettre une mutation pour mettre à jour l'état en passant les données reçues de l'appel ajax comme charge utile à la mutation.

Alors maintenant, votre code devrait être:

magasin

const createStore =() => { 
    return new Vuex.Store({ 
    state: { 
     article_list: [] 
    }, 
    mutations: { 
     updateArticleList (state, payload) { 
     state.article_list = payload 
     console.log('article list length', state.article_list.length) 
     } 
    }, 
    actions: { 
     mutateArticleList ({commit}, payload) { 
      api.get_articles() 
      .then((data) => { 
       commit('updateArticleList', data); 
      }) 
     } 
    } 
    }) 
} 

index.vue

<template> 
    ... 
    <tag-contents v-for="article in articles" :key="article.id"></tag-contents> 
    ... 
</template> 

<script> 
export default { 
    ... 
    fetch() { 
     this.$store.dispatch('mutateArticleList', data) 
    }, 

    computed:{ 
     articles(){ 
      return this.$store.state.article_list; 
     } 
    } 
} 
</script>