vuex中遇到的坑，vuex数据改变，组件中页面不渲染

@TOC
相信许多vuex新手都会遇到这样的问题：

• vuex数据更新后，插件中使用数据的地方没有更新

这样的代码

data() {
    return {
      tableData: this.$store.state.AdminInfo
    };
  }

然后在 template 中使用 tableData

<el-table :data="tableData" class="tablePst">
   	<el-table-column label="登录名" prop="loginname"></el-table-column>
   	<el-table-column label="真实姓名" prop="realname"></el-table-column>
</el-table>

这样的话，就会出现数据改变不渲染的问题

问题

要解决问题，就得理解vue生命周期，页面加载前 tableData 获取 store 里的值赋给自己，这样 tableData 只有一初始值，后续vuex中状态发生改变，并不会再次赋值给 tableData ，除非页面刷新重新加载，组件生命周期重新开始，才能拿到最新的值

解决

1.去掉组件中 tableData 的状态，在模板中直接使用 $store.state.AdminInfo 这样就能随时拿到最新的状态值了

<el-table :data="$store.state.AdminInfo" class="tablePst">
   	<el-table-column label="登录名" prop="loginname"></el-table-column>
   	<el-table-column label="真实姓名" prop="realname"></el-table-column>
</el-table>

2.使用mapState,把vuex中的状态暴露给组件，再使用，具体见文档 vuex mapState官方文档.