Vuejs2 vuex在存储状态上加载子组件

我使用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>

如果我检查状态，一切都会完美更新，但切换不会发生。在这种情况下我做错了什么？

尝试使用计算属性来观察状态的变化

Vue.useVuex const store=新的Vuex.store{ 声明：{ 视图：“列表” }, 突变：{ 更改视图状态，键入{ state.view=type }, } }; Vue.组件“列表视图”{ 模板：` 列表 {{item}} `, 资料{ 返回{ dummyData:[1,2,3,4,5] } } } Vue.组件“网格视图”{ 模板：` 网格 {{item}} `, 资料{ 返回{ dummyData:[1,2,3,4,5] } } } const app=新的Vue{ el:“应用程序”， 百货商店 数据：{ dummyData:[1,2,3,4,5] }, 计算：{ 视图{返回此。$store.state.view} }, 方法：{ 更改视图类型{ 此.$store.commit'CHANGE\u VIEW'，键入 } } } 桌子{ 字体系列：arial，无衬线； 边界塌陷：塌陷； 宽度：100%； } td，th{ 边框：1px实心DDDD； 文本对齐：左对齐； 填充：8px； } tr：第n个孩子{ 背景色：DDDD； } 更改为：

列表 网格

---

您应该尝试使用计算属性，而不是绑定模板中的存储值，如Vuex指南所示：感谢反馈，问题在于这两个组件是从不同的源渲染的，并且它们有自己的模板来渲染这两个组件，如数据表和数据网格中所示@fefeyes，结束每一个，因为它装载了FireAjax来获取数据。我不认为这与组件有什么关系，我已经编辑了这个片段，用两个组件来演示。我可能错了，所以更多的信息可能会更好@费菲特感谢更新。是的，这似乎与问题有关。从网格到列表，我可以毫无问题地切换。而不是从列表到网格停止工作。我的数据表组件使用jquery数据表，并且不会在视图更改时破坏自身