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

Posted 2023-02-23

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

【英文标题】：Vue.js - Fetch Data from API and reload component on Vuex state change

【发布时间】：2021-09-28 01:20:07

【问题描述】：

我来自 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 组件中显示数据，但我被卡住了。任何指针都会有所帮助。 提前致谢。

【问题讨论】：

做了哪些部分？你做过搜索吗？如果是这样，那么 @click="viewProfile(item)"，在 viewProfile 中使用像 axios 这样的 HTTP 客户端来获取用户，但是你已经有了它们的详细信息，所以只需设置它，理想情况下你想针对命名空间存储，比如this.$store.commit("user/set", item);，然后设置成this.$store.state.user。然后它将保存为每个可以快速填写的用户属性添加修改器，还可以查看 mapState，它将 this.$store.state.user.username 减少为 this.user.username 等

【参考方案1】：

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

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

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

【参考方案2】：

这就是我要做的。

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

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

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

【讨论】：

除了您的回答之外，我还按照 Traversy Media 的这个 Vuex 速成课程教程 youtube.com/watch?v=5lVQgZzLMHc 完全理解了流程。