Vue3 属性使用方法

<script setup lang="ts">
// 引入模块
import { ref, reactive, onMounted, watch, computed } from "vue";
import { useArticleDataStore } from '@/stores/ArticleClass'
import { useRouter } from "vue-router"

// 数据定义 
const store = useArticleDataStore()
let ArticleData = reactive({ data: store.getStoreArticleListData })
let router = useRouter()
let isDetail = ref(false)
let total = ref(store.getTotalNum)

// 在组件挂载时获取文章列表数据
onMounted(() => {
  if (store.getStoreArticleListData.length === 0) {
    GetArticleListData(1)
  }
})
// 监听属性 使用，目前示例为监听多个目标值的改变
watch(
  [
    () => store.getStoreArticleListData,
    () => store.getTotalNum
  ], // 新值                        旧值
  ([newArticleData, newTotalNum], [oldArticleData, oldTotalNum]) => {
    if (!isSameData(ArticleData.data, newArticleData)) {
      ArticleData.data = newArticleData;
    }
    total.value = newTotalNum
  }
);
// 计算属性 Vue3的计算属性不像Vue2 那样   { 原值 | 计算属性(原值)  } 这样了
const CountDeleteCode = computed(() => {
  return (state: string, is_delete: string) => {
    return parseInt(state) + parseInt(is_delete) === 0 ? '已发布正常' : '已删除/驳回'
  }
})
</script>

*Vue3语法糖里无法使用this访问，这也是编写习惯的改变，this无法访问到Vue实例