何时再次通过Vuex从API获取数据以保持数据的最新

Question

我从API中获取数据，并希望通过Vuex实现它。所以我的用户存储模块是保存和管理所有的用户。

要获取所有用户，我有一个fetch操作，它通过Axios调用API，并将用户数组从响应传递到突变。

我在/users有一个视图组件，它呈现一个用户列表。在我所称的组件中

async mounted() {
  await this.fetch();
}

若要初始化存储，请执行以下操作。之后，存储getter将返回用户数组，并呈现列表。我知道我还可以通过getter获取一个id项。

getById: state => id => state.users.find(user => user.id === id)

当导航到用户详细信息页/users/:id时，我可以使用它，通过this.$router.currentRoute.params.id提取userId并呈现用户详细信息。但如果我直接装载那条路线呢？然后，使用空用户数组初始化存储，它将找不到一个用户。

因此，我是否应该在该用户详细信息视图的mounted钩子中再次获取所有用户？我认为直接调用axios服务是一种反模式，因为资源说我应该使用Vuex作为组件和API之间的接口。

何时从api中获取所有用户有最佳实践吗？因为让我们将图像导航到另一个页面，该页面在select组件中加载所有用户，我应该从getter中获取它们吗？也许它会加载一个不再存在的用户。但是每隔X秒对所有用户进行投票也是很糟糕的.

更新存储数据以使整个应用程序中的所有组件都可以访问存储数据的正确方法是什么？

Answer 1

我不同意使用Vuex以您描述的方式存储整个表值的用户数据。对我来说这听起来像是安全问题。记住，Vuex是一个客户端存储；这意味着您的所有用户数据对使用您的应用程序的任何客户端都是可见的。您应该永远不要存储敏感数据客户端。

把它输入浏览器控制台，你就会明白我的意思了。

document.getElementsByTagName('a')[0].__vue__.$store.state

Vuex应用于存储用于驱动会话所需的单个用户的非敏感数据。

如果您要存储所有用户数据，以便列出帐户，以便由管理员或其他人员管理它们，那么当您加载列出用户帐户的任何视图时，我会按需调用API。这样，您将始终拥有最最新的数据，而不需要不断轮询您的API。

我会将这些数据分页，只加载前5条记录(以保持最初的API调用很轻)，然后向管理员提供搜索帐户的能力；搜索应该通过API在服务器端完成。

示例：

methods: {
    fetchUsers(limit, page, search) {
        const thisIns = this;
        if (search) {
            this.userQuery = `/users/find?search=${search}`
        } else {
            this.userQuery = `/users/find?limit=${limit}&page=${page}`
        }
        thisIns.$http.get(this.userQuery)
            .then(async (response) => {
                console.log(response.data)
            })
            .catch(function (error) {
                console.log(error)
            });
    }
},
created() {
    this.fetchUsers(5, 1)
},

然后，您可以根据需要调用您的fetchUsers()方法，例如在执行用户搜索时。

由于您使用的是Axios，您还可以考虑实现一种缓存机制axios-缓存适配器，这样您的API调用就可以缓存一段时间。这将减少访问服务器的API调用的数量。

我也不认为这是可扩展的。记住，当应用程序第一次加载应用程序时，应用程序用户将不得不等待这个有效负载。这也会对性能产生影响；随着用户数据的增长，您将消耗越来越多的设备RAM。