Vue3 Pinia对state的订阅监听（$subscribe，$onAction）数据监听

<template>
    <div class="main-container" :class="{'show-scroll':targetIsVisible}">
        <div :style="{height:frameHeight+'px'}"  class="main-content" :class="{'show-scroll':targetIsVisible}">
            <!--:scrolling="targetIsVisible ? 'yes':'no'"-->
      <iframe id="content_frame_quality" scrolling="true"   frameborder="no" border="0" height="100%" width="100%" 
          :src="state.frameUrl"
          name="main" @load="adjustIframe">
     </iframe>
         </div>
    </div>
</template>

<script setup>
import { reactive } from "@vue/reactivity";
import "../assets/css/base.css";
import { useWebStore } from '@/store/web'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
let webStore = useWebStore()

//第二种修改方式：使用$patch改变数据 $patch 可以同时修改多个值
function changeDataByPatch() {
    /*
    $patch也有两种的调用方式
    第一种写法的在修改数组时，假如我只想要把 ipList 的中第2项改成‘192.168.10.222’，
    但是也需要传入整个包括所有元素的数组，这无疑增加了书写成本和风险，
    显然是不合理的，所以一般都推荐使用第二种传入一个函数的写法
    * */
    // 第一种 $patch方法
    // store.$patch({
    //   baseUrl: 'https://www.jd.com/',
    //   ipList: ['192.168.10.777', '192.168.10.222', '192.168.10.888']
    // })
    // 第二种 $patch方法
    webStore.$patch((state) => {
        //state.baseUrl = 'https://www.jd.com/'
        //state.ipList[0] = '192.168.10.222'
    })
}

const targetIsVisible = ref(false);
const frameHeight = ref(1000)
const setHeight = ( height )=>{
    frameHeight.value=height
}

const state = reactive({
    currentFrameUrl: '/Quality/Mobile/Web',
    frameUrl:''
})

const adjustIframe = (e) => {
      setTimeout(() => {
                    let qualityIframe = document.getElementById("content_frame_quality");
                    console.log(qualityIframe);
                    let contentWindowObject = qualityIframe.contentWindow;
                let targetDom = contentWindowObject
                //console.log(targetDom)
      }, 0);
}

onBeforeMount(() => {
    localStorage.setItem("userData", { "username": 'zhangsan', token: 'xmyfsj0821119' })
    const internalInstance = getCurrentInstance()
  const internalData = internalInstance.appContext.config.globalProperties
    const userToken = internalData.$cookies.get('userToken') // 后面的为之前设置的cookies的名字
    state.frameUrl=`https://test.ashgso.com${state.currentFrameUrl}?login_from=davinci&davinci_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJhZG1pbiIsImlhdCI6MTY3MDM4MTczNCwiZXhwIjoxNjcwMzgxNzk0LCJuYmYiOjE2NzAzODE3MzQsImFjY291bnQiOiJhZG1pbiIsInBhc3N3b3JkIjoiYWI1OGUwN2JhYmViODZlZTk1Y2I5MzFkZGI4MjViODIifQ.7iEs5fpYj10QlLX4fi7FJEy3iuRptQDX6V3A1178o90&checklist_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJhZG1pbiIsImlhdCI6MTY3MDM4MTczNCwiZXhwIjoxNjcwMzgxNzk0LCJuYmYiOjE2NzAzODE3MzQsImFjY291bnQiOiJhZG1pbiIsInBhc3N3b3JkIjoiYWI1OGUwN2JhYmViODZlZTk1Y2I5MzFkZGI4MjViODIifQ.7iEs5fpYj10QlLX4fi7FJEy3iuRptQDX6V3A1178o90`
})


onBeforeRouteLeave((to, from, next) => {
    
});

//webStore中数据监听
const subscribe = webStore.$subscribe((mutation, store) => {
      /*
      * mutation主要包含三个属性值：
      *   events：当前state改变的具体数据，包括改变前的值和改变后的值等等数据
      *   storeId：是当前store的id
      *   type：用于记录这次数据变化是通过什么途径，主要有三个分别是
      *         “direct” ：通过 action 变化的
                ”patch object“ ：通过 $patch 传递对象的方式改变的
                “patch function” ：通过 $patch 传递函数的方式改变的

            * detached:布尔值，默认是 false，正常情况下，当订阅所在的组件被卸载时，订阅将被停止删除，
              如果设置detached值为 true 时，即使所在组件被卸载，订阅依然在生效
      *
      * */
      //在此处监听store中值的变化，当变化为某个值的时候，去做一些业务操作之类的
            if (store.currentFrameUrl) {
                state.currentFrameUrl = store.currentFrameUrl
                state.frameUrl = `https://test.ashgso.com${state.currentFrameUrl}?login_from=davinci&davinci_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJhZG1pbiIsImlhdCI6MTY3MDgwOTE3MiwiZXhwIjoxNjcwODA5MjMyLCJuYmYiOjE2NzA4MDkxNzIsImFjY291bnQiOiJhZG1pbiIsInBhc3N3b3JkIjoiYWI1OGUwN2JhYmViODZlZTk1Y2I5MzFkZGI4MjViODIifQ.8d8NfS36GoK_dQunfavgJckgcGvtjXhsAW4aynCKjLk&checklist_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJhZG1pbiIsImlhdCI6MTY3MDgwOTE3MiwiZXhwIjoxNjcwODA5MjMyLCJuYmYiOjE2NzA4MDkxNzIsImFjY291bnQiOiJhZG1pbiIsInBhc3N3b3JkIjoiYWI1OGUwN2JhYmViODZlZTk1Y2I5MzFkZGI4MjViODIifQ.8d8NfS36GoK_dQunfavgJckgcGvtjXhsAW4aynCKjLk`
            }
    }, { detached: false }
)

//监听actions中的方法
webStore.$onAction(args => {
    args.after(() => {
        //也可以在action执行完数据后后赋值
        if (args.name == 'setCurrentFrameUrl') { 
            //state.currentFrameUrl = args.args[0]
            //state.frameUrl=`https://test.ashgso.com/${state.currentFrameUrl}?login_from=davinci&davinci_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJhZG1pbiIsImlhdCI6MTY3MDM4MTczNCwiZXhwIjoxNjcwMzgxNzk0LCJuYmYiOjE2NzAzODE3MzQsImFjY291bnQiOiJhZG1pbiIsInBhc3N3b3JkIjoiYWI1OGUwN2JhYmViODZlZTk1Y2I5MzFkZGI4MjViODIifQ.7iEs5fpYj10QlLX4fi7FJEy3iuRptQDX6V3A1178o90&checklist_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJhZG1pbiIsImlhdCI6MTY3MDM4MTczNCwiZXhwIjoxNjcwMzgxNzk0LCJuYmYiOjE2NzAzODE3MzQsImFjY291bnQiOiJhZG1pbiIsInBhc3N3b3JkIjoiYWI1OGUwN2JhYmViODZlZTk1Y2I5MzFkZGI4MjViODIifQ.7iEs5fpYj10QlLX4fi7FJEy3iuRptQDX6V3A1178o90`
        }
  })
})

onMounted(() => {
    //console.log(webStore.getModuleList)
})
</script>

<style lang="scss" scoped>
  .main-container{
        padding: 0;
        padding-top:30px;
        box-sizing: border-box;
        height:100vh;
    }

    .main-content{
        padding-top:60px;
        overflow:hidden;
    }

    .show-scroll{
        overflow:visible;
    }

    iframe{
    overflow: hidden;
  } 
</style>