Nuxtjs vuex 저장소가 업데이트 된 경우에도 페이지 구성 요소가 업데이트되지 않습니다.

Question

서버 측 렌더링 프로젝트에 nuxtjs를 사용하고 있습니다. Vuex 저장소를 업데이트하고 페이지를 표시 할 위치에서 REST API를 가지고 있습니다. In the nuxtjs documentation for using Vuex store, it mentions using fetch api of the pages. 그래서 API에 대한 기사 목록을 가져 와서 페이지를 렌더링하려고합니다.

Vuex 가기 : 페이지/index.vue에서

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

:

<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 저장소가 반응 적이기 때문에 저장소의 상태를 계산 된 속성 내에서 반환하여 검색 할 수 있습니다.

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

대신 이렇게 : 무슨 일을하는 것은 getting vuex state into components

를 참조

는

<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가 재평가되고 업데이트와 DOM을 cuases 때마다

업데이트 할

언급 할 사항이 하나 더 있음 :

액션은 비동기 작업을위한 액션이기 때문에 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); 
      }) 
     } 
    } 
    }) 
} 

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