扬尘vue

zmc

2023-09-04 34257f504330191b1a698eb48b52217095db47fe

 src/views/setting/SetConfiguration.vue

@@ -1,62 +1,76 @@
<script>
// import DustRadarChart from '../../sfc/DustRadarChart.vue';
import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue'
import dayjs from 'dayjs';
  export default {
    components :{
    // DustRadarChart,
    // TimeSelectWithShortCuts
  },
    data() {
import {useCounterStore} from '@/stores/counter';
export default {
   data(){
      return{

      }
    },
    mounted() {
   },
   setup(){
    const store = useCounterStore()
    const unsubscribe = store.$onAction(
  ({
    name, // action 的名字
    store, // store 实例
    args, // 调用这个 action 的参数
    after, // 在这个 action 执行完毕之后，执行这个函数
    onError, // 在这个 action 抛出异常的时候，执行这个函数
  }) => {
    // 记录开始的时间变量
    const startTime = Date.now()
    // 这将在 `store` 上的操作执行之前触发
    console.log(`Start "${name}" with params [${args.join(', ')}].`)

    // 如果 action 成功并且完全运行后，after 将触发。
    // 它将等待任何返回的 promise
    after((result) => { 
      console.log(
        `Finished "${name}" after ${
          Date.now() - startTime
        }ms.\nResult: ${result}.`
      )
    })

    // 如果 action 抛出或返回 Promise.reject ，onError 将触发
    onError((error) => {
      console.warn(
        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
      )
    })
  }
)
    return{
      store,unsubscribe
    }
   },
   computed:{
    a(){
      return this.store.doubleCount*2
    },
    methods: {
 
     }
   },
   mounted(){

   },
   methods:{
    doThing(){
      this.store.increment(5)
      this.store.doubleCount
    }
   }
}
</script>

<template>
  <div>
    <DustRadarChart></DustRadarChart>
    <el-button type="primary" @click="doThing">点击{{ store.doubleCount }}</el-button>
  </div>

  <!-- <div class="container">
    <el-space wrap :size="20" >
      <el-card v-for="i in 6" :key="i">
        111
      </el-card>
    </el-space>
    <el-card v-for="i in 5" :key="i">
        111
    </el-card>
    <el-card>
      22
    </el-card>

  </div> -->
  <div>{{ a }}</div>
  <div>{{ store.secret }}</div>
  <div>{{ store.vue }}</div>
  <div>{{ store.天 }}</div>

</template>
<style scoped>

<style  scoped>

.container {
  margin: 20px 20px;
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  height: 100%;
}
.el-card {
 min-width: 500px;
  min-height: 400px;
  flex: 1 200px;
  /* flex: 1; */
 
}
</style>