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>