Javascript 在Vue中保存异步数据的最佳方法是什么？

我有以下存储模块：

const state = {
    user: {}
}

const mutations = {
    saveData(state, payload) {
        state.user = payload
    }
}

const actions = {
    async loadData({ commit }, payload) {
        try {
            const res = await axios.get('https://api.example.com/user/1')
            commit('saveData', res.data.data)
        } catch(e) {
            console.log(e)
        }
    } 
}

const getters = {
    getData(state) {
        return state.user
    } 
}

现在，在组件中保存数据的最佳方法是什么？它正在使用

手表

import { mapGetters } from 'vuex'

export default {
    data() {
        return {
            user: {}
        }
    },
    computed: {
        ...mapGetters({
            getData
        })
    },
    watch: {
        '$store.state.users.users'() {
            this.user = this.getData
        }
    }
}

。。。或者商店。订阅

import { mapGetters } from 'vuex'

export default {
    data() {
        return {
            user: {}
        }
    },
    computed: {
        ...mapGetters({
            getData
        })
    },
    created() {
        this.$store.subscribe((mutation, state) => {
            if(mutation.type === 'saveData') {
                this.user = this.getData
            }
        })
    }
}

---

最好使用

computed

属性来访问存储数据并保持其反应性。 可以使用

mapGetters

创建计算属性，就像您在共享snipped中所做的那样，但是，考虑到getter只是从state返回

user

，我认为您根本不需要getter，您可以使用helper简单地从state映射值。通过这种方式，组件将简化为如下所示：

import { mapState } from 'vuex'

export default {
    computed: {
        ...mapState([
            'user'
        ])
    }
}

---

使用上述方法，您可以在组件的方法中将用户引用为

this.user

，或者在组件的模板中仅引用为

user

。此外，由于getter已不再使用，您可以从存储中删除getter定义（除非您在其他任何地方使用它）.

既然您已经知道存储映射，我想您应该尝试使用某种编辑表单，其中需要从数据库中获取实际数据，并且能够更改此数据，以便稍后将其发送回数据库

不需要getter就可以对存储项进行简单引用。您可以在组件中使用

mapState

：

{
  computed: {
    ...mapState({
      user: state => state.user,
    }),
  }
}

因此，只要

user

在存储中更改，您的组件就会知道它。在这里，您可以更新正在编辑的对象。让我们将其重命名为

edit

，以避免冲突：

{
  data() {
    return {
      edit: {},
    }
  },

  computed: {
    ...mapState({
      user: state => state.user,
    }),
  },

  watch: {
    user: {
      immediate: true,
      handler(user) {
        this.edit = { ...user }
      },
    },
  },
}

现在，

edit

会相应地更新，即使组件是在商店项目更新后安装的（由于

immediate

选项），您也可以在组件中安全地修改它，而不会对商店参考产生任何影响

---

请注意，在这个实现中，如果您想在

edit

对象中的字段上具有反应性，那么您需要在每个字段更新上更新整个

edit

对象，如下所示：

this.edit={……this.edit，[prop]：value}

。但是如果您希望它是自然的Vue方式，那么首先需要使用实际的对象结构初始化

edit

，并在

user

的观察程序中执行类似

object.assign的操作（this.edit，user）

您只需使用Computed即可，只要存储区中的值发生变化，它就会发生变化谢谢您的解释！现在的问题是何时使用

store.subscribe（）

？你能给我举个例子吗？当你需要了解任何商店突变时，你可以使用它。说实话，我从未用过它。假设当你需要对许多商店物品可能发生的变化做出反应时，它会很有帮助，但我通常只是将它们捆绑在一个对象中并观察它。明白了！非常感谢。