Vue.js - 从 API 获取数据并在 Vuex 状态更改时重新加载组件

Question

我来自 jQuery 背景，最近才开始使用 Vue。我正在尝试尽可能多地学习，并且正在尝试开发一个简单的用户搜索和查看详细信息应用程序，但是我遇到了困难，似乎找不到继续前进的出路。

我有一个包含三个组件的布局 - Nav.vue、Search.vue、UserProfile.vue，如图所示。 UserProfile.vue 在路由器视图中。我正在使用状态为 userId 和 username 的 Vuex 存储，并且我已经定义了突变来提交状态更改。

当用户通过在搜索组件中提供用户名进行搜索时，我将从左侧边栏的 API 获取用户列表。当用户单击其中一个搜索结果时，我正在提交 userId 状态并希望从 API 中获取并使用从 Vuex 商店检索到的 userId 在 UserProfile 组件上显示用户配置文件。 UserProfile 组件位于路由器视图内。

Vuex store.js:

export default new Vuex.Store({

state: {
    userId:"",
    username: ""
}

mutations: {

  setUserId (state, payload) {
    state.userId = payload
  },

  setUsername (state, payload) {
    state.user.username = payload
  },
}

});

在 Search.vue

Search.vue (outside  <router-view />)
-------------------------------------
<a href="#" @click="viewProfile" class="btn btn-info" >View Profile</a>

methods: {

    viewProfile() {
        this.$store.commit("setUserId", this.userId);
        this.$store.commit("setUsername", this.username);
    }
}

在 UserProfile.vue

我正在从计算属性的状态中获取 userId。

UserProfile.vue (inside  <router-view />)
-------------------------------------------

computed: {
    userId () {
      return this.$store.state.userId
    }
  }

现在我想从 API 获取数据并根据从 Vuex 存储中检索到的选定 userId 在 UserProfile 组件中显示数据，但我被卡住了。任何指针都会有所帮助。 提前致谢。

Answer 1

您的商店应包含状态、getter、突变和操作。 Getter 用于检索状态。 突变用于更新状态。 （突变只能从动作中使用） 操作用于提交突变。

您还可以在操作中从您的 Api 获取数据。 要使用操作，您可以使用以下语法： $store.dispach("action-name",payload) 载荷是可选的。

有关 vuex 的更多文档，请访问： https://vuex.vuejs.org/guide/actions.html#composing-actions

Answer 2

这就是我要做的。

在viewProfile 方法中，在改变userId 和username 之后，我将从API 获取数据。实际上，我使用 Vuex action 和 setUserId，setUsername 突变将在 Vuex 操作中。 API 调用的参数将是userId，我们需要保存响应（配置文件数据），可以在 Vuex 或组件中。

我说当我们从搜索用户的结果中选择用户时，我们不需要更改 url。 UserProfile 组件只会渲染响应数据。

如果我们应该转到其他页面，例如localhost://users/:id，那么我们必须使用mounted 挂钩。 mounted 钩子是我们必须调用 fetch 函数以根据路由器参数 id 获取配置文件数据的地方。