vue js 2の変更を選択した小道具で動的にタブする方法は？

Question

Vue JSの新機能です。だから何か間違ったことがないならば、

私は、タブコンポーネントにvue-bulma-tabsモジュールを使用しています。私は別のコンポーネントから動的にタブを変更したい。ここでは、現在選択されているタブの選択された小道具です。選択した小道具の値をグローバル変数で変更して、どのコンポーネントからでもタブを表示できるようにします。解決策がない場合は可能ですか？可能であれば、できるだけ早く私にお答えください。

は、ここに私の現在のタブコードです：

<tabs> 
    <tab name="About Us"> 
     <h1>This part is about us 
     </h1> 
    </tab> 
    <tab name="About our culture"> 
     <h1>This part is about our culture 
     </h1> 
    </tab> 
    <tab name="About our vision" selected="selectedTab"> 
     <h1>This part is about our vision 
     </h1> 
    </tab> 
    </tabs> 
    <button type="button" @click="GoTab()">Go to tab</button> 

私はタブボタンに[Go]をクリックしたときに、それが私たちのビジョンタブについてに行きますしたいです。

マイVueのJSコード：

<script> 
import TabParentComponent from 
'../../components/layout/tabParentComponent.vue' 
import TabChildComponent from 
'../../components/layout/tabChildComponent.vue' 
export default { 
    components: { 
    'tab': TabChildComponent, 
    'tabs': TabParentComponent 
}, 
data() { 
    return { 
    selectedTab: false 
    } 
}, 
methods: { 
    GoTab() { 
    this.selectedTab = true 
    } 
} 
} 
</script> 

seletedTabは、データセクションに= trueのとき、それは動作します。しかし、私はボタンをクリックするとtrueになります。それ以外の場合はfalseになります。 特に、私はvuexストアデータを保存したいと思います。 selectedTabはストア値に応じてtrueまたはfalseになります。 seletedTabvuex

このversion

Answer 1

表情はどこかのアプリでそれを使用する、gettersです。 VueのJSコード：

<script> 
import TabParentComponent from 
'../../components/layout/tabParentComponent.vue' 
import TabChildComponent from 
'../../components/layout/tabChildComponent.vue' 

import { mapGetters, mapActions } from 'vuex' 

export default { 
    components: { 
    'tab': TabChildComponent, 
    'tabs': TabParentComponent 
}, 
computed: {...mapGetters([ 
    'selectedTab' 
    ]) 
}, 
methods: { 
    ...mapActions([ 
    'GoTab' 
    ]) 
} 
} 
</script> 

vuexとアプリケーションの構造が若干異なりますことを忘れないでください！ Application Structure