Question

我的问题是，当我从一个用户页面转到另一个用户页面时，组件中的信息仍然保留在第一个用户那里。因此，如果我从/user/username1转到/user/username2，则信息仍保留在username1中。我怎样才能解决这个问题？这是我的代码：

UserProfile.vue

mounted() {
    this.$store.dispatch('getUserProfile').then(data => {
        if(data.success = true) {
        this.username = data.user.username;
        this.positive = data.user.positiverep;
        this.negative = data.user.negativerep;
        this.createdAt = data.user.createdAt;
        this.lastLogin = data.user.lastLogin;
        data.invites.forEach(element => {
            this.invites.push(element);
        });
        }
    });
},

这是从actions.js文件中获得的user：

const getUserProfile = async ({
  commit
}) => {
  try {
    const response = await API.get('/user/' + router.currentRoute.params.username);
    if (response.status === 200 && response.data.user) {
      const data = {
        success: true,
        user: response.data.user,
        invites: response.data.invites
      }
      return data;
    } else {
      return console.log('Something went wrong.');
    }
  } catch (error) {
    console.log(error);
  }
};

是否应该添加watch而不是mounted来跟踪URL中username的更改？

Answer 1

您可以将watch与immediate属性一起使用，然后可以删除mounted中的代码，因为将改为调用监视处理程序。

watch: {
    '$route.params.username': {
      handler: function() {
          this.$store.dispatch('getUserProfile').then(data => {
              if(data.success = true) {
                  this.username = data.user.username;
                  this.positive = data.user.positiverep;
                  this.negative = data.user.negativerep;
                  this.createdAt = data.user.createdAt;
                  this.lastLogin = data.user.lastLogin;
                  data.invites.forEach(element => {
                      this.invites.push(element);
                  });
             }
          });
      },
      deep: true,
      immediate: true,
    },
}

Answer 2

您的页面似乎是在检索数据之前加载的，您需要在数据中放置一个“ loading”属性，并为组件添加一个v-if="!loading"，它只有在更新显示后才会呈现。就我个人而言，如果可以的话，我会避免观看，因为它对细粒度处理的性能不利。

Answer 3

是的，您应该在包含用户信息的语句上添加wach（您可能在观察对象时遇到问题，因此可以将用户信息保存在json中，但不确定）。当用户更改-呼叫操作时，在获得应更改状态的响应呼叫突变后，请观察该状态。

您可能会使用更好的语法从存储接收数据。直接从分叉的钩子调用调度确实是一个坏主意，请使用vuex文档使您的代码更好。

URL更改后VueJS数据不会更改

3 个答案: