时间戳

首页 > 解决方案 > 在哪里使用 API 数据更新 Vuex 状态

vue.js - 在哪里使用 API 数据更新 Vuex 状态

问题描述

这个问题更像是一个代码组织问题。我是整个前端的新手。我启动了一个由 VueJS + Vuex + VuerRouter + Vuetify + TypeScript 驱动的简单应用程序。这是src文件夹的视图：

├── App.vue
├── assets
│   └── ...
├── components
│   └── ...
├── plugins
│   └── ...
├── router
│   └── ...
├── services
│   └── StuffAPI.ts
├── store
│   ├── index.ts
│   └── modules
│       └── stuff.ts
└── views
    └── Stuff.vue

App.vue我预取了on所需的大部分数据mounted()：

export default class extends Vue {
  listStuffs() {
    StuffAPI.list()
      .then((stuffs: Stuff[]) => {
        this.$store.dispatch("stuff/changeStuffs", stuffs);
      })
      .catch(e => {
        // ...
      });
  }

  mounted() {
    this.listStuffs();
  }
}
</script>

但是，在某些情况下，组件会更改服务器端的数据（例如，通过创建资源）。现在我需要再次从服务器获取数据。但是，我不想在listStuffs整个代码库中复制该方法。我该如何解决？我不能从子组件调用父方法。我应该使用自定义事件吗？或者拥有一个获取数据的 Vuex 操作是否完全没问题？

标签： vue.jsvuex

解决方案

首先，您可以在 VueJS 中使用“混合”。Mixins 是一项允许您在整个应用程序组件中使用相同功能的功能。

其次，你可以使用 Vuex。

  1. 创建商店。（例如：CustomAPI.js）
  2. 在文件中写入 Getter、Mutations 和 Actions
  3. 调用组件中的操作（例如：this.$store.dispatch('StuffAPI').then()
  4. 不断改变存储中的 StuffAPI 结果
  5. 使用 Getters 获取变异数据

作为参考，请检查以下代码：

import * as types from '../types'
// Import axios or any http client

export const state = {
  isLoggedIn: false
}

export const getters = {
  isLoggedIn: state => state.isLoggedIn
}

export const mutations = {
  [types.MUTATE_LOGIN_FLAG]: (state, isLoggedIn) => {
    state.isLoggedIn = isLoggedIn
  }
}

export const actions = {

  AUTH_LOGIN: ({ commit }, payload) => {
    return new Promise((resolve, reject) => {
      // MY HTTP LOGIN REQUEST CODE HERE

    //   On result..
    commit(types.MUTATE_LOGIN_FLAG, true)
    })
  },

  AUTH_LOGOUT: ({ commit }, payload) => {
    return new Promise((resolve, reject) => {
    //  MY HTTP LOGOUT REQUEST CODE HERE

    // ... On result, 
    commit(types.MUTATE_LOGIN_FLAG, false)
    })
  }
}

现在，每当我需要某个组件的登录状态时，我都会使用：

this.$store.getters.isLoggedIn

这将返回 True 或 False。

每当我需要登录或注销时，我都会使用：

this.$store.dispatch('AUTH_LOGIN')

我可以在我的应用程序的任何地方调用这些操作。

注意：这只是一个示例实现。您并没有真正在商店中写登录注销：D

推荐阅读