带有路由和刷新的 Vuex 逻辑答案

【问题标题】：Vuex logic with routes and refresh带有路由和刷新的 Vuex 逻辑
【发布时间】：2018-02-27 23:35:23
【问题描述】：

我正在使用 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) 能够在填充数组并更新计算的项目变量时实现它。这是错的吗？最好的方法是什么？

【问题讨论】：

标签： vue.js vue-router vuex

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我同意 Georgi 的观点，将逻辑从计算属性转移到存储 getter：

store.js

const getters = {
  project: state => {
    return id => {  // note this passes the id from the component

      return state.fram && state.fram.projects   // in case async not done yet
        ? state.fram.projects.find(item => item.id === id)
        : null

    }
  }
}

myComponent.vue

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

虽然不太确定在这种情况下使用 mapGetters。

【讨论】：