只是一个简单的问题。

你能强迫Vue.js重新加载/重新计算所有内容吗?如果有,怎么做?


当前回答

为我工作

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

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

其他回答

我找到了一个办法。这有点俗气,但很管用。

vm.$set("x",0);
vm.$delete("x");

其中vm是视图模型对象,x是一个不存在的变量。

Vue.js会在控制台日志中抱怨这个问题,但它确实会触发所有数据的刷新。使用版本1.0.26进行测试。

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

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

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

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的这一部分,请查看关于反应性-更改检测警告的官方文档。这是一本必读的书!

使用vm。美元(varName,价值)。

在Change_Detection_Caveats中查看详细信息

添加:key到vue-router库的router-view组件的方法会引起我的fickers,所以我使用vue-router的“组件内保护”来拦截更新,并在同一路由上的路径更新时相应地刷新整个页面(如$router. exe)。美元,路由器。推,路由器。替换也无济于事)。唯一需要注意的是,通过刷新页面,我们暂时打破了单页应用行为。

  beforeRouteUpdate(to, from, next) {
    if (to.path !== from.path) {
      window.location = to.path;
    }
  },