带路由和刷新的Vuex逻辑

Question

我正在开发一个使用Vue，Vuex和Vue-Router的项目，但是我遇到了一个很大的问题，围绕着异步操作和组件的流程。

在我的主要组件中，我发送一个动作来获取带有ajax的项目列表。

我的列表组件从此getter接收项目数组：

allProjects: state => state.projects

这很有用，因为默认状态是一个空数组。我的问题是当我想去路由project/:id时，如果项目已经加载，它可以使用这段代码：

computed: {
    project () {
        return this.$store.state.fram.projects.find(item => item.id === this.id);
    }
}

但如果我在路线project/4时刷新页面，则无效。我理解这是因为获取所有项目的操作尚未完成。但我希望Vue（X）在填充数组时能够实现它并更新计算的项目变量。这是错的吗？最好的办法是什么？

Answer 1

在getters中创建返回状态的store，并在您的组件中使用mapGetters。同时解构所需的吸气剂。

computed: {
    ...mapGetters([
         'your_getter'
       ]),
}

API：https://vuex.vuejs.org/en/getters.html

Answer 2

我同意Georgi，将逻辑从计算属性转移到商店getter：

<强> store.js

computed: {
  project () {
    return this.$store.getters.project(this.id) 
  }
}

<强> myComponent.vue

while((c=in.read())!=-1){
    out.write(c);
    if(c=='r'){
        break;
    }
}

虽然不太确定在此上下文中使用 mapGetters 。