vuex最簡單的

https://segmentfault.com/a/1190000009404727

 

  "dependencies": {
    "axios": "^0.17.1",
    "element-ui": "^2.0.11",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

Messages.vue

<template>
    <el-row  id="signup">
        <el-col :span="5">.</el-col>
            <el-col :span="14">
                <el-card class="box-card">
                      <div slot="header" class="clearfix">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                              <el-breadcrumb-item :to="{ path: '/' }">用戶</el-breadcrumb-item>
                              <el-breadcrumb-item>消息</el-breadcrumb-item>
                        </el-breadcrumb>
                      </div>
                      <div class="text item">
    <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市區"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="郵編"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操做"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">編輯</el-button>
      </template>
    </el-table-column>

  </el-table>
                      </div>
                </el-card>
            </el-col>
        <el-col :span="5">.</el-col>
    </el-row>
</template>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card{
    margin-top:30px; 
  }

</style>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀區',
          address: '上海市普陀區金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀區',
          address: '上海市普陀區金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀區',
          address: '上海市普陀區金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀區',
          address: '上海市普陀區金沙江路 1518 弄',
          zip: 200333
        }]
      }
    }
  }
</script>