Question

我正在将nuxtjs用于服务器端渲染项目。我有一个REST API，我希望更新Vuex商店并显示页面。 In the nuxtjs documentation for using Vuex store, it mentions using fetch api of the pages。所以我试图获取API的文章列表并呈现页面。

Vuex商店：

;WITH cte AS
    (
        select 
            d._LINE_NO, a._PROCESS_INST_NO, a._ISSUER, a._ISSUE_DATE, d._PROCESS_CONTENTS,
            d._OPT_DIVISION,
     RANK() OVER(PARTITION BY b._GOODS_CD ORDER BY b._LINE_NO) AS Rnk,
             b._GOODS_CD , b._GOODS_NAME ,
              b._QTY,
            a._Order_No,
             c._GOODS_CD as RM_CD, c._GOODS_NAME as RM_NAME,
              a._NOTE,d._LINE_NO + 1 as Proc_Step_No,
        COUNT(*) OVER () as Total_Rows
        from
            [ENVNDIVDB].[dbo].[TBL_PROC_PH] a
        inner join [ENVNDIVDB].[dbo].[TBL_PROC_PM] b on b._PROCESS_INST_NO = a._PROCESS_INST_NO
        inner join
            [ENVNDIVDB].[dbo].[TBL_PROC_PMS] c on c._PROCESS_INST_NO = a._PROCESS_INST_NO
        inner join
            [ENVNDIVDB].[dbo].[TBL_PROC_PN] d on d._PROCESS_INST_NO = a._PROCESS_INST_NO
        where
            a._PROCESS_INST_NO = '609390' )
SELECT distinct 
        _LINE_NO, _PROCESS_INST_NO, _ISSUER, _ISSUE_DATE, _PROCESS_CONTENTS,
            _OPT_DIVISION,
             _GOODS_CD, _GOODS_NAME, _QTY,
            _Order_No, RM_CD, RM_NAME,_NOTE,
            Proc_Step_No
FROM
    cte
WHERE rnk = 1
ORDER by 
    _LINE_NO

在pages / 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)
          })
      }
    }
  })
}

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

<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页面上，没有文章。即使在索引console.log('article list length', state.article_list.length) // 16方法的控制台上，article_list也是0

created

我在这里缺少什么？请你帮助我好吗。

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>

每当更新商店状态时，重新评估计算的属性articles并根据DOM更新

还有一件事需要提及：

由于操作是针对异步任务的，因此您可以将RESTapi提取逻辑移动到mutateArticleList操作中，并通过将从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>

即使更新了vuex存储，Nuxtjs页面组件也不会更新

1 个答案: