基于vue-cli脚手架的从后台拿到数据自动渲染到页面

一.简介

最近再学一些关于微信公众号网页开发的东西，这里用了vue框架搭建。遇到了几个问题，写在这里，以作记录。

二.具体内容

1.从后台拿数据，同步地渲染到页面上。

①首先是配置API请求

  userAlways: function (param) {
    return axios({
      url: 'url地址',
      method: 'get',
      withCredentials: true
    })
      .then((response) => {
        // console.log(response.data)
        return response.data
      })
      .catch((error) => {
        console.log(error)
      })
  }

②在需要的组件里调用该数据

    getUserAlways: function () {
      back.userAlways().then(function (response) {
        console.log(response)
        let stationInfo = []
        let used
        let total = null
        let descTest = ''
        if (response.data !== undefined) {
          for (let i = 0; i < response.data.length; i++) {
            let powerItem = {}
            // powerItem.id = i + 1
            powerItem.powerSockets = response.data[i].powerSockets // 直接把返回数据下的powerSockets一整个数组给提前放到list数组中了
            powerItem.title = response.data[i].name
            used = response.data[i].used
            total = response.data[i].total
            descTest = used + '使用/' + total + '插座'
            powerItem.desc = descTest
            stationInfo[i] = powerItem
          }
        }
        this.list = stationInfo
    }.bind(this)

注意这里所用到的一些小想法，以及bind(this)的作用。

2.点击每一个列表，弹出该列表所对应的对话框，这里用到了vux组件的x-dialog标签，具体内容可参考官方文档。

①我的html代码，注意x-dialog几个相关属性的使用

<template>
  <div class="comPowerStationPage">
    <group title="常用电站列表">
      <panel :list="list" :type="type" @on-click-item="showModule"></panel>
      <x-dialog v-model="showDialogStyle" :hide-on-blur="true" :dialog-style="{'max-width': '100%', width: '80%', height: '50%', 'background-color': 'transparent'}">
      <div class="tanChuang">
        <p>插座状态</p>
        <div class="main">
          <grid :cols="4" :show-lr-borders="false">
            <grid-item v-for="item in socketItems" :key="item.id" :label="item.value" @on-item-click="socketItemClick(item)" class="dan">
              <img slot="icon" :src="item.imgsrc">
            </grid-item>
          </grid>
        </div>
        <div class="socketDialog" @click="showDialogStyle=false">
          <span class="vux-close">确定</span>
          <!-- <router-view></router-view>不需要这个东西了，下文是直接强制跳转到一个指定页面的的 -->
        </div>
      </div>
      </x-dialog>
    </group>
  </div>
</template>

 ②methods方法，弹出对话框，根据后台返给的数据

    showModule: function (items) {
      console.log(items)
      let socketInfo = []
      if (items.powerSockets !== undefined) {
        for (let y = 0; y < items.powerSockets.length; y++) {
          let socketItem = {} // 不同作用域可以定义相同的变量名，这没事
          socketItem.id = y + 1
          socketItem.value = y + 1
          if (items.powerSockets[y].used) {
            socketItem.imgsrc = '/static/socketoff.png'
          } else {
            socketItem.imgsrc = '/static/socketon.png'
          }
          socketInfo[y] = socketItem
        }
      }
      this.socketLocationinfo = items.title
      this.socketItems = socketInfo
      this.showDialogStyle = true
      // console.log(this.socketLocationinfo)
    },

3.点击插座，跳转到充电页面，并将插座信息存储到vuex中，然后在充电页面组件内调用该信息，从而实现子组件的基于vuex的通信。

①配置vuex中store.js

    setPileSn (state, msg) {
      state.pileSn = msg
    },
    setSocketId (state, msg) {
      state.socketId = msg
    },

②将插座信息数据存储到store.js中，并点击插座实现路由跳转到充电页面chargePage中。

    // 点击插座
    socketItemClick: function (items) {
      console.log('12')
      console.log(items)
      // console.log(this.list.title)
      // this.$store.commit('setPileSn', this.list.tital)
      this.$store.commit('setSocketId', items.value)
      this.$store.commit('setPileSn', items.id)
      this.$store.commit('setsocketLocationinfo', this.socketLocationinfo)
      console.log(this.socketLocationinfo)
      this.$router.push({ path: '/chargePage' })
    }