vuex中的store.replaceState()
关于vuexvuex是在使用vue-cli脚手架开发过程中常用的一种状态管理模式+库。它充当应用程序中所有组件的集中存储。我们可以使用它来进行非父子组件之间的传值。具体用法就不在这里赘述了大家可以参考官方文档vuex官网遇到的问题在最近的学习中,博主需要在vue-cli脚手架的项目中同时使用vuex与iframe,并且需要在主页面改变vuex内相应的值之后在iframe内能够实时的看到对应的变化,
关于vuex
vuex是在使用vue-cli脚手架开发过程中常用的一种状态管理模式+库。它充当应用程序中所有组件的集中存储。我们可以使用它来进行非父子组件之间的传值。具体用法就不在这里赘述了大家可以参考官方文档vuex官网
遇到的问题
在最近的学习中,博主需要在vue-cli脚手架的项目中同时使用vuex与iframe,并且需要在主页面改变vuex内相应的值之后在iframe内能够实时的看到对应的变化,话不多说上代码。
- home.vue
<template>
<div class="home">
<div class="pink">
<div>我是主页面</div>
<div>Scale:{{$store.state.scale}}</div>
<el-button type="primary"
@click="changeScale">改变Scale</el-button>
</div>
<mainContent></mainContent>
</div>
</template>
<script>
// @ is an alias to B/src
import mainContent from './main'
import { Button } from 'element-ui'
export default {
name: 'Home',
components: {
mainContent,
[Button.name]: Button
},
methods: {
changeScale () {
this.$store.commit('newSacle', parseInt(Math.random() * 100))
}
}
}
</script>
<style scoped>
.home {
display: flex;
height: 100vh;
}
.pink {
background: pink;
height: 100%;
width: 20%;
}
</style>
- designBuilder.vue
<template>
<div style="height:100%;width:100%"
class="designBuilder">
<card></card>
</div>
</template>
<script>
import card from '../components/card'
export default {
name: 'designBuilder',
components: {
card
},
mounted () {
}
}
</script>
<style scoped>
.designBuilder {
background: yellow;
}
</style>
- card.vue
<template>
<div style="height:100%;width:100%">
<div>我是iframe</div>
<div>Scale:{{$store.state.scale}}</div>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
div {
font-size: 20px;
}
</style>
- 初始界面
左侧是主html内获取的vuex中scale的值,而右侧则是一个iframe嵌套了designBuilder,右侧的scale的值是iframe里的vuex的scale。这时我们点击左侧“改变scale“按钮会发现主页面的scale发生了改变而iframe里的值却没有发生对应的变化如下图所示:
这是为什么呢?原来在vue里使用iframe时,iframe内的vue的实例对象与主html页面的vue的实例对象是两个相互独立的存在。我们点击主html页面上的修改按钮只会修改主html页面对应的vue实例内vuex,而不会改变iframe内的。同理此时如果修改iframe内的vuex的值,主html页面内vuex的值也不会改变,如图:
解决方法
这是我们就需要使用vuex中的store.replaceState()方法,将主html页面中vuex的state与iframe页面中vuex的state关联起来。博主对这个方法的理解是:将括号内的值赋值给sotre的state,类似于进行对象之间的浅拷贝,这样改变一个的值,另外一个也会随之改变。(这是我个人的理解,如果有不对的,希望大家可以指正)
具体使用方法如下,上代码:
首先我们要在main.js里初始化vue的实例对象时将其挂在到window对象上去
window.$vm = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
然后在iframe指向的路由的mouted函数中添加如下的代码,这里博主的iframe指向的路由是#/designBuilder,所以在designBuilder组件中添加
mounted () {
this.$store.replaceState(window.top.$vm.$store.state)
}
这一行代码就是将主html页面的state浅拷贝给iframe里的state。这样我们就可以实现两边的vuex内的值同时变化了。如图
同样的该方法也可以解决vue页面刷新后或者第三方页面返回当前页面之前获取的state数据消失的问题,可以将state里的信息保存到sessionStorage里,然后在页面加载时进行获取。
写在最后
该博客对应的源码,如果大家有兴趣,可以去我的仓库查看仓库地址,谢谢!
更多推荐
所有评论(0)