vuex中的store.replaceState()

关于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里，然后在页面加载时进行获取。

写在最后

该博客对应的源码，如果大家有兴趣，可以去我的仓库查看仓库地址，谢谢！