ストア状態の突然変異のvuexロードサブコンポーネント

Question

私はグリッドリストスイッチャボタンの状態を追跡するためにvuexを使用します。 ビューの種類を選択するたびに、テンプレートを切り替える必要がありますが、これは私の場合は機能しません。ここにテンプレートがあります

<div class="users-container"> 
    <div v-if="$store.state.view === 'list'"> 
     <h5>list</h5> 
     <data-table :columns="columns" ajax="/api/v1/users/datatable"></data-table> 
    </div> 
    <div v-else> 
     <h5>grid</h5> 
     <data-grid :roles = "roles"></data-grid> 
    </div> 
</div> 

状態を確認すると完全に更新されますが、切り替えは行われません。この場合、私は間違っているのですか？

Answer 1

代わりにcomputedプロパティを使用して状態の変更を確認してください。

Vue.use(Vuex) 
 

 
const store = new Vuex.Store({ 
 
    state: { 
 
    view: 'list' 
 
    }, 
 
    mutations: { 
 
    CHANGE_VIEW (state, type) { 
 
     state.view = type 
 
    }, 
 
    } 
 
}); 
 

 
Vue.component('list-view', { 
 
    template: ` 
 
    <div> 
 
     <h5>List</h5> 
 
     <ul> 
 
     <li v-for="item in dummyData">{{item}}</li> 
 
     </ul> 
 
    </div> 
 
    `, 
 
    data() { 
 
    return { 
 
     dummyData: [1, 2, 3, 4, 5] 
 
    } 
 
    } 
 
}) 
 

 
Vue.component('grid-view', { 
 
    template: ` 
 
    <div> 
 
     <h5>Grid</h5> 
 
     <table> 
 
     <tr v-for="item in dummyData"><td>{{item}}</td></tr> 
 
     </table> 
 
    </div> 
 
    `, 
 
    data() { 
 
    return { 
 
     dummyData: [1, 2, 3, 4, 5] 
 
    } 
 
    } 
 
}) 
 

 
const app = new Vue({ 
 
    el: '#app', 
 
    store, 
 
    data: { 
 
    dummyData: [1, 2, 3, 4, 5] 
 
    }, 
 
    computed: { 
 
    view() { return this.$store.state.view } 
 
    }, 
 
    methods: { 
 
    changeView(type) { 
 
     this.$store.commit('CHANGE_VIEW', type) 
 
    } 
 
    } 
 
})

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
td, th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #dddddd; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script> 
 

 

 
<div id="app"> 
 
    <div class="control"> 
 
    <p>Change to:</p> 
 
    <button v-on:click="changeView('list')">List</button> 
 
    <button v-on:click="changeView('grid')">Grid</button> 
 
    </div> 
 
    <div class="users-container"> 
 
    <div v-if="view === 'list'"> 
 
     <list-view></list-view> 
 
    </div> 
 
    <div v-else> 
 
     <grid-view></grid-view> 
 
    </div> 
 
    </div> 
 
</div>