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>