对于那些还在四处寻找的人来说，现在有一个包。

https://github.com/gabrielmbmb/vuex-multi-tab-state

我所要做的就是安装它，并将它添加到我的插件中。ts(就像它在那个页面上显示的那样)，它确实做了我想要的。

为我工作

    data () {
        return {
            userInfo: null,
            offers: null
        }
    },

    watch: {
        '$route'() {
            this.userInfo = null
            this.offers = null
            this.loadUserInfo()
            this.getUserOffers()
        }
    }

这对我来说很有效。

created() {
    EventBus.$on('refresh-stores-list', () => {
        this.$forceUpdate();
    });
},

另一个组件触发refresh-stores-list事件将导致当前组件重新呈现

如果你的URL在加载组件时也发生了变化，你可以在:key属性中使用它。如果你直接在router-view标签上使用它，效果会特别好。这与添加的键的benedit是一个实际绑定到页面内容的值，而不仅仅是一些随机数。

<router-view :key="this.$route.path"></router-view>

Why?

.．.需要强制更新吗?

也许你没有在最好的状态下探索Vue:

要使Vue自动对值更改作出反应，必须在数据中初始声明对象。如果没有，则必须使用Vue.set()添加它们。

请参阅下面演示中的注释。或者在JSFiddle中打开相同的演示。

new Vue({ el: '#app', data: { person: { name: 'Edson' } }, methods: { changeName() { // because name is declared in data, whenever it // changes, Vue automatically updates this.person.name = 'Arantes'; }, changeNickname() { // because nickname is NOT declared in data, when it // changes, Vue will NOT automatically update this.person.nickname = 'Pele'; // although if anything else updates, this change will be seen }, changeNicknameProperly() { // when some property is NOT INITIALLY declared in data, the correct way // to add it is using Vue.set or this.$set Vue.set(this.person, 'address', '123th avenue.'); // subsequent changes can be done directly now and it will auto update this.person.address = '345th avenue.'; } } }) /* CSS just for the demo, it is not necessary at all! */ span:nth-of-type(1),button:nth-of-type(1) { color: blue; } span:nth-of-type(2),button:nth-of-type(2) { color: red; } span:nth-of-type(3),button:nth-of-type(3) { color: green; } span { font-family: monospace } <script src="https://unpkg.com/vue"></script> <div id="app"> <span>person.name: {{ person.name }}</span><br> <span>person.nickname: {{ person.nickname }}</span><br> <span>person.address: {{ person.address }}</span><br> <br> <button @click="changeName">this.person.name = 'Arantes'; (will auto update because `name` was in `data`)</button><br> <button @click="changeNickname">this.person.nickname = 'Pele'; (will NOT auto update because `nickname` was not in `data`)</button><br> <button @click="changeNicknameProperly">Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though `address` was not in `data`)</button> <br> <br> For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below). </div>

要掌握Vue的这一部分，请查看关于反应性-更改检测警告的官方文档。这是一本必读的书!

添加以下代码:

this.$forceUpdate()