vue3 使用笔记

目录结构

/src
	/pages
		/index
			index.vue
	/stores
		index.ts

监听 index.vue 中数据变化

<script lang="ts" setup>
import { reactive, watch } from 'vue';

const data = reactive({
	loading: false,
	type: 0
})

watch(
	() => [data.loading, data.type],
	() => {
		console.log('loading change: ', data.loading);
		console.log('type change: ', data.type);
	},
	onTrigger(e) {
		// 可监听到每次改变的键值(e.key, e.newValue)
		console.log('trigger:', e)
	}
)
</script>

监听store 中state 值的变化

// ./src/stores/index.ts
import { defineStore } from 'pinia';

const IndexStore = defineStore ({
	id: 'index',
	state: () => {
		return {
			status: 0,
		}
	}
})

export { IndexStore }

// ./src/pages/index/inde.vue
<script lang="ts" setup>
import { IndexStore } from '../../stores/index';

const indexStore = IndexStore()
indexStore.$subscribe((_mutation, state) => {
	// 当IndexStore中state的任意值有变化，即可监听到
	console.log(state.status)
})
</script>