VUEX小记

vuex 页面实现异步请求

state相当于 data用于存储数据 getters 相当于计算属性，用于计算动态获取参数 mutations 是合法用于修改 state 状态的 actions 用于处理异步提交的 页面 dispatch 发送过来的数据，使用commit 进行提交

vuex

import local from "@/utils/local";
import {getTable1} from "@/api/getMapAll";

const store = {
    state: {
        selectMap: {
            selectTimeTable: []
        }

    },
    
    getters: {
        getDistrict(state) {
            if (state.activeDistrict.level === 1) {
                return {}
            } else if (state.activeDistrict.level === 2) {
                return {
                    region_name: state.activeDistrict.region_name,
                    region_no: state.activeDistrict.region_no
                }
            } else if (state.activeDistrict.level === 3) {
                return {
                    country_name: state.activeDistrict.country_name,
                    country_no: state.activeDistrict.country_no
                }
            } else if (state.activeDistrict.level === 4) {
                return {
                    powerstation_name: state.activeDistrict.powerstation_name,
                    powerstation_no: state.activeDistrict.powerstation_no
                }
            } else {
                return state.activeDistrict
            }
        },
        getRefreshCollection(state) {
            return state.staticcollection
        }
    },
    mutations: {
        setActiveDistrict(state, value) {
            state.activeDistrict = value
        },
        changeLogin(state, user) {
            state.Authorization = user.Authorization;
            local.set("t_k", user.Authorization);
        },
        //首页地图模块使用
        selectDate(state, value) {
            state.selectMap.selectTimeTable = value
        }
    },
    actions: {
        async selectDate(commit, state) {
            let res = await getTable1({
                startTime: state[0],
                endTime: state[1]
            })
            this.commit('selectDate', res.data)

        }
    }

}

export default store

page 页面 使用dispatch发送参数

<template>
  <div class="selectTime_style">
    <el-date-picker
        value-format="yyyy-MM-dd HH:mm:ss"
        clearable
        v-model="selectDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
    />
    <el-button class="picker_style" slot="append" icon="el-icon-search" @click="getSelectTime"></el-button>
  </div>
</template>

<script>

export default {
  name: 'SelectTime',
  data() {
    return {
      selectDate: ['2022-03-01 00:00:00', '2022-03-31 00:00:00']
    }
  },
  mounted() {
  },
  methods: {
    getSelectTime() {
      if (this.selectDate === null) {
        this.$message({
          message: '请选择时间',
          type: 'warning'
        })
        return
      }
      this.$store.dispatch('selectDate', this.selectDate)
    }
  }
}
</script>

<style lang="less" scoped>
.selectTime_style {
  width: 100%;

  .picker_style {
    margin-left: .6rem;
  }

}

</style>

接收页面 使用 computed 计算属性 与 watch 进行同时使用

<template>
  <div>
    <el-card class="box-card">
      <span>出口低电压台区</span>
    </el-card>
    <el-table :data="tableData" height="380" border style="width: 100%">
      <el-table-column align="center" prop="date" show-overflow-tooltip label="≥5" width="60"></el-table-column>
      <el-table-column align="center" prop="name" show-overflow-tooltip label="≥10" width="60"></el-table-column>
      <el-table-column align="center" prop="address" show-overflow-tooltip label="≥20" width="60"></el-table-column>
      <el-table-column align="center" prop="address" show-overflow-tooltip label="≥30" width="60"></el-table-column>
    </el-table>
  </div>
</template>

<script>

import {getTable} from "@/api/getMapAll";
import {mapState} from 'vuex'

export default {
  data() {
    return {
      tableData: [],
    }
  },
  computed: {
    ...mapState({
      selectTimeTable: state => state.selectMap.selectTimeTable
    })
  },
  watch: {
    selectTimeTable(newVal, val) {
      this.tableData = newVal
    }
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    async getTableList() {
      let res = await getTable()
      this.tableData = res.data
    },
  }
}
</script>

<style lang="less" scoped>

</style>