近期假期组件编写与watch的使用技巧

src\components\MonthPage\item.vue

近期假期子组件

<template>
  <li class="card-item">
    <div class="card">
      <div class="img-wrap">
        <img :src="require(`../../assets/img/${item.name}.jpg`)" :alt="item.name"/>
        <div class="mask">
          <h1>{{item.name}}</h1>
          <h1>{{item.festival}}</h1>
        </div>
      </div>
      <div class="content-wrap">
        <h1>假期描述：{{item.desc || '无说明'}}</h1>
        <h1>拼假建议：{{item.rest || '无说明'}}</h1>
      </div>
    </div>
  </li>
</template>

<script>
  export default {
    name: "CardItem",
    props: ['item'],

  }
</script>

src\components\MonthPage\index.vue

假期组件

<template>
  <div class="list-wrapper">
    <ul class="holiday-list">
      <card-item
        v-for="(item, index) of data"
        :key="index"
        :item="item"
      ></card-item>
    </ul>
  </div>
</template>

<script>
import CardItem from './item'
export default {
  name: 'cardList',
  components: {
    CardItem,
  },
  props:{
    data: Array
  },
  
}
</script>

src\views\Month.vue

近期页面，请求数据

<template>
  <div class="container">
    <error-tip></error-tip>
    <div v-if="!errorCode">
      <card-list :data="monthData"></card-list>
    </div>
  </div>
</template>

<script>
import getData from '@/services'
import { getNowDate } from '@/libs/utils'

import { onMounted, computed, watch } from 'vue'
import { useStore } from 'vuex'
import CardList from '@/components/MonthPage'
import ErrorTip from '@/components/ErrorTip'
export default {
  name: 'MonthPage',
  components: {
    CardList,
    ErrorTip,
  },
  setup() {
    const store = useStore(),
      state = store.state

    onMounted(() => {
      getData(store, 'month', getNowDate('month'))
    })

    watch(
      () => state.dayData,
      () => {
        store.commit('setErrorCode', 0)
      }
    )

    return {
      monthData: computed(() => state.monthData),
      errorCode: computed(() => state.errorCode),
    }
  },
}
</script>