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

Question

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

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

我在 /users 有一个 View 组件，它呈现了一个用户列表。在我调用的那个组件中

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

初始化商店。之后，store getter 将返回 users 数组并呈现列表。我知道我也可以通过 getter 按 id 获取一个项目

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

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

那么我应该在该用户详细信息 View 的 mounted Hook 中再次获取所有用户吗？我认为直接调用 axios 服务是一种反模式，因为资源说我应该使用 Vuex 作为组件和 API 之间的接口(interface)。

从 api 获取所有用户时是否有最佳实践？因为让我们想象一下您导航到另一个页面，该页面将所有用户加载到一个选择组件中，我应该从 getter 中获取它们吗？也许它会加载一个不再存在的用户。但是每 X 秒轮询一次所有用户也很糟糕......

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

Answer 1

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

将其输入浏览器控制台，您就会明白我的意思。

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

Vuex 应用于存储驱动 session 所需的个人用户的非敏感数据。

如果您出于列出帐户的目的存储所有用户数据，以便管理员或其他人可以管理它们，那么我会改为在加载列出您的用户的任何 View 时按需调用该 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-cache-adapter ，以便您的 API 调用在您定义的一段时间内被缓存。这将减少访问您的服务器的 API 调用次数。

我也不认为这是可扩展的。请记住，应用程序用户在首次加载您的应用程序时必须等待此有效负载。这也有性能影响；随着您的用户数据随着时间的推移而增长，您将消耗越来越多的设备 RAM。