vue3+pinia使用的时候,watch疑惑？

Question

vue3+pinia使用的时候，并没有对state赋值，watch为什么还能监听到变化？
如果不用mapState，第一次也监听不到，问题就在computed和mapState，为什么会出现这种情况？

//stroreimport { defineStore } from "pinia"const useTestStore = defineStore({    id: 'testStore',    state() {        return {            obj: {                name: '张三'            }        }       },})export default useTestStore

import useTestStore from "./store"export default {  computed: {    ...mapState(useTestStore, ['obj'])  },  watch: {    obj: {      handler(newValue, oldValue) {        //这里为什么会执行？        console.log('sss', JSON.stringify(newValue), JSON.stringify(oldValue))      },      deep: true    }  },}

Answer 1

Pinia的store中的state是通过返回一个函数来初始化的，这个函数返回的对象是响应式的。当你在组件中使用watch来监听store的状态时，实际上是在监听这个响应式对象的变化。因为这个对象是响应式的，所以当它的任何属性发生变化时，Vue的响应式系统会自动触发watch的回调函数。