Vue.js 即使vuex存储已更新，Nuxtjs页面组件也不会更新

我正在使用nuxtjs进行服务器端渲染项目。我有一个REST API，我想从中更新Vuex存储并显示页面。因此，我试图获取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>

但是在index.vue页面上没有文章。即使在index

created

方法的控制台上，文章列表也是0

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

---

我错过了什么？你能帮帮我吗

由于vex store是被动的，您可以通过在计算属性内返回存储状态来检索存储状态。看

您正在做的是：

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

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

...
...
导出默认值{
...
获取（）{
此.$store.dispatch（'mutateArticleList'，数据）
},
计算：{
第（）条{
返回此。$store.state.article\u列表；
}
}
}

由于vex store是被动的，您可以通过在计算属性内返回商店的状态来检索它。看

您正在做的是：

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

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

...
...
导出默认值{
...
获取（）{
此.$store.dispatch（'mutateArticleList'，数据）
},
计算：{
第（）条{
返回此。$store.state.article\u列表；
}
}
}

嗨！我已经用你的代码更新了我的问题，只做了一些轻微的修改。但是，页面仍然没有更新。在终端中，我可以看到文章总数，但在浏览器中，文章长度为0。我添加了一个额外的按钮来更新/分派从api获取项目的操作。当我点击按钮获取项目时，页面就会更新。如何获取api结果，然后显示页面。@Robin请尝试在created（）钩子中调用update方法，并删除所有获取thingHi的内容！我已经用你的代码更新了我的问题，只做了一些轻微的修改。但是，页面仍然没有更新。在终端中，我可以看到文章总数，但在浏览器中，文章长度为0。我添加了一个额外的按钮来更新/分派从api获取项目的操作。当我点击按钮获取项目时，页面就会更新。如何获取api结果，然后显示页面。@请尝试在created（）钩子中调用update方法并删除所有获取内容