Javascript Vuex-突变后的状态

我对国家管理很陌生。我目前正在建立一个具有无限加载功能的产品列表。这是我的密码：

这是我的组件：

<template>
  <div class="">
    <section class="space--sm">
      <div class="container">
          <div class="row">
              <div class="col-sm-12">
                    <div v-for="(data, index) in products" v-bind:key="data.id" class="item col-sm-4 col-xs-12" :id="'data-id-'+data.id" >
                        <a href="#" v-on:click.prevent="selectProduct(data)" >
                            <h4>{{data.name}}</h4>
                        </a>
                    </div>
                    <infinite-loading force-use-infinite-wrapper="true" @infinite="infiniteHandler" ref="infiniteLoading">
                        <span slot="no-results">
                            No results
                        </span>
                        <span slot="no-more">
                            There are no more results
                        </span>
                    </infinite-loading>
                </div>
          </div>
      </div>
    </section>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';
import { mapState, mapActions } from 'vuex';
export default {
    name: 'List',
    computed: mapState({
        products: state => state.list.products
    }),
    methods: {
        ...mapActions('list', [
            'selectProduct'
        ]),
        infiniteHandler($state) {
            setTimeout(() => {
                this.$store.dispatch('products/fetch')

                console.log(this.products.length); 
                //returns 0 but vue debugger says products state got datas

                if (this.products.length) {
                    $state.loaded();
                    if(this.products.length < 15){
                        $state.complete();
                    }
                } else {
                    $state.complete();
                }
            }, 1000);
        },
    },
    components: {
        InfiniteLoading
    }
}
</script>

在infiniteHandler方法中，我这样做：

this.$store.dispatch('products/fetch')

Afer Translation products state应在内部加载数据（使用vue调试器进行检查），但当我在分派后执行此操作时：-

console.log(this.products.length);

我得到0，这也意味着状态中不存在数据。我做错什么了吗？这也是使用Vuex的最佳实践吗？谢谢。$store.dispatch（'products/fetch'）

是异步的<代码>控制台.log（this.products.length）

在这种情况下，您应该使用

   watch: {
      products: function (newVal) {
        if (newVal.length) {
          $state.loaded();
          if(newVal.length < 15){
            $state.complete();
          }
        } else {
          $state.complete();
        }
      }
    }

观察：{
产品：功能（newVal）{
if（新值长度）{
$state.loaded（）；
如果（新值长度<15）{
$state.complete（）；
}
}否则{
$state.complete（）；
}
}
}
如果异步操作返回承诺（与您的操作一样），则调用
dispatch
将返回承诺，以便您的消费者可以等待操作完成

比如说

async infiniteHandler($state) { // note, this is an "async" function
  setTimeout(() => {
    await this.$store.dispatch('products/fetch') // note the "await"

    console.log(this.products.length); 

    if (this.products.length) {
      $state.loaded();
      if(this.products.length < 15){
        $state.complete();
      }
    } else {
      $state.complete();
    }
  }, 1000);
},

在你的组件中

try {
  await this.$store.dispatch('products/fetch') 
  // etc
} catch (e) {
  // do something else
}


只是注意到另一件事。。。您应该在操作中使用传入的上下文
状态
，而不是一些全局
状态
对象，即

fetch({ state, commit }) {

异步无限句柄（$state）{
设置超时（（）=>{
等待此消息。$store.dispatch（'products/fetch'）
console.log（this.products.length）；
if（本产品长度）{
设置超时（（）=>{
$state.loaded（）；
}, 1000);
如果（本产品长度<15）{
$state.complete（）；
}
}否则{
$state.complete（）；
}
}, 1000);
},
嗨，菲尔，谢谢你的回复。我只是想知道是否有其他方法可以从action而不是catch（）将错误返回给用户。谢谢你的评论需要解释一下。不鼓励只使用代码的答案，这段代码如何适合这个问题还不是很清楚。
try {
  await this.$store.dispatch('products/fetch') 
  // etc
} catch (e) {
  // do something else
}

fetch({ state, commit }) {