javascript - VueJS组件系统架构

Question

我想要完成的事情

我正在尝试为我正在处理的应用程序找出一个好的架构。

如果你看一些screenshots of the current version of our application您会看到各种格式的表格/数据列表。第二张截图中的表格有自己的导航。在某些情况下，可以选择表格行。在其他屏幕中，可以根据指定的关键字过滤项目列表，等等。

前端将在 VueJS 中重建。我不想为每个特定屏幕构建一次性组件，而是希望有一个更通用的解决方案，我可以在整个应用程序中使用。

我需要的是一个组件系统，其中根组件包含一组数据，子组件提供(可能是多个)该数据的表示。根组件还包含——主要是用户指定的——用于控制表示的配置、过滤器和选择。

some pseudocode 最好地说明了我要实现的目标.

问题

存储数据的最佳方式是什么？子组件应该如何访问这些数据？

将 data-display 的数据连同 Prop 传递给它的每个 child 对我来说似乎很麻烦。特别是因为表示可以隐式访问此数据。

我应该为此使用 Vuex 吗？这将如何处理 data-display 的多个实例？我读了一些关于动态模块注册的内容，这有用吗？

有没有更好的方法？非常感谢任何帮助!

Answer 1

我不确定我是否掌握了您要求的所有细节，但了解数据在 SPA 中的多个“页面”中是通用的。 我肯定会推荐 Vuex:

• 所有页面的数据相同
• 通过组件计算属性访问， 它们对存储更改有反应，但也缓存以保存 如果依赖关系没有变化则重新计算
• 在 Prop (向下传递)和事件(向上传递)中保存大量潜在的复杂数据传递

查看伪代码，侧边栏上有三种类型的过滤器。将该数据也放入存储中，然后 View 上的计算属性可以对数据应用过滤器。然后可以轻松地单独测试计算逻辑。

child.vue

<template>
  <div>{{ myChildData.someProperty }}</div>
</template>

<script>
export default {
  props: [...],
  data: function () {
    return {
      selection: 'someValue'  // set this by, e.g, click on template
    }
  },
  computed: {
    myChildData() {
      return this.$store.getters.filteredData(this.selection)
    }
  }
}
</script>

store.js

const state = {
  myData: {
    ...
  },
  filters: {  // set by dispatch from sidebar component
    keyword: ...,
    toggle: ...,
    range: ...
  },
}

const getters = {
  filteredData: state => {
    return childSelection => {  // this extra layer allows param to be passed
      return state.myData
       .filter(item => item.someProp === state.filters.keyword)
       .filter(item => item.anotherProp === childSelection)
    }
  },
}

const mutations = {
  'SET_DATA' (state, payload) {
    ...
  },
  'SET_FILTER' (state, payload) {
    ...
  }
}

export default {
  state,
  getters,
  mutations,
}

一般 child

可能有很多方法可以解决这个问题。我使用了组合，这意味着每个 child 都有一个精简组件，每个 child 都使用一个公共(public)组件，但只有当 child 有特定数据或一些可以放入槽中的独特标记时，你才需要这个。

child1.vue

<template>
  <page-common :childtype="childType">
    <button class="this-childs-button" slot="buttons"></button>
  </page-common>
</template>

<script>
import PageCommon from './page-common.vue'
export default {
  props: [...],
  data: function () {
    return {
      childType: 'someType'
    }
  },
  components: {
    'page-common': PageCommon,
  }
}
</script>

page-common.vue

<template>
  ...
  <slot name="buttons"></slot>
</template>

<script>
export default {
  props: [
    'childtype'
  ],
  data: function () {
    return {
      ...
    }
  },
}
</script>

多个数据实例

同样，有很多变体——我使用了一个带有属性的对象作为索引，所以存储变成了

store.js

const state = {
  myData: {
    page1: ...,  // be sure to explicitly name the pages here
    page2: ...,  // otherwise Vuex cannot make them reactive
    page3: ...,
  },
  filters: {  // set by dispatch from sidebar component
    keyword: ...,
    toggle: ...,
    range: ...
  },
}

const getters = {
  filteredData: state => {
    return page, childSelection => {  // this extra layer allows param to be passed
      return state.myData[page]  // sub-select the data required
       .filter(item => item.someProp === state.filters.keyword)
       .filter(item => item.anotherProp === childSelection)
    }
  },
}

const mutations = {
  'SET_DATA' (state, payload) {
    state.myData[payload.page] = payload.myData
  },
  'SET_FILTER' (state, payload) {
    ...
  }
}

export default {
  state,
  getters,
  mutations,
}