私はあなたの要件のすべての詳細を把握していませんが、データがSPAの複数の「ページ」に共通することを理解しています。 は、私は間違いなくVuexをお勧めします：変更を保存することに反応しているだけでなく、依存関係
アクセスのための
- 同じデータを小道具（下を通す）と出来事（上を通過する）の潜在的に複雑な多くのデータの通過
擬似コードを見ると、3つのタイプのフィルターがあります彼はサイドバー。そのデータをストアに入れると、ビューの計算されたプロパティでデータにフィルタを適用できます。計算ロジックは簡単に分離してテストされます。
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>
店。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,
}
ジェネリック子供
はこれを取り組むために、おそらく多くの方法があります。私はコンポジションを使用しました。これは、一般的なコンポーネントを使用する各子のための薄いコンポーネントを意味しますが、子が特定のデータを持っている場合や、スロットに入れることができる独自のマークアップを持つ場合にのみ必要です。
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>
ページ-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,
}
なります