即使更新vuex存儲，Nuxtjs頁面組件也不會更新

Question

我正在使用nuxtjs進行服務器端渲染項目。我有一個REST API，我想從哪裏更新Vuex商店並顯示該頁面。 In the nuxtjs documentation for using Vuex store, it mentions using fetch api of the pages。所以我試圖獲取API的文章列表並呈現頁面。

Vuex店：

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> 
    <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> 

在控制檯上我可以看到，店裏的article_list已更新

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

但在index.vue頁面上，沒有文章。即使指數created方法的控制檯上的article_list是0

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

缺少什麼我在這裏？你可以幫我嗎。

Answer 1

由於vex商店是反應式的，您可以通過在計算出的屬性中返回它來檢索商店的狀態。見getting vuex state into components

你正在做的是：

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

，而不是這樣做：

<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> 

每當店裏的狀態更新計算prperty articles被重新評估和cuases DOM來更新

還有一件事要提到：

由於操作是針對異步任務的，因此您可以將RESTapi提取邏輯移動到您的操作中，並通過將從ajax調用接收的數據作爲有效內容傳遞給突變來提交突變以更新狀態。

所以，現在你的代碼應該是：

店

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>