在哪里使用 API 数据更新 Vuex 状态答案

【问题标题】：Where to update Vuex state with API data在哪里使用 API 数据更新 Vuex 状态
【发布时间】：2020-03-16 01:14:11
【问题描述】：

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

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

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

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 操作是否完全没问题？

【问题讨论】：

你的声音看起来需要 mixins。 Mixins 是一种为 Vue 组件分配可重用功能的灵活方式
如果您已经在使用Vuex，那么您可能应该将 api 逻辑移动到一个操作中。每当您需要重新获取数据时，都需要再次分派操作。

标签： vue.js vuex

【解决方案1】：

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

其次，你可以使用 Vuex。

创建商店。（例如：CustomAPI.js）
在文件中写入 Getter、Mutations 和 Actions
调用组件中的操作（例如：this.$store.dispatch('StuffAPI').then()
不断改变商店中的 StuffAPI 结果
使用 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

【讨论】：