我正在从API提取数据，并希望通过Vuex实现数据。因此，我的用户存储模块负责保存和管理所有用户。
为了获取所有用户，我有一个fetch Action ，该 Action 通过Axios调用API，并将用户数组从响应传递到突变。
我在/users处有一个 View 组件，该组件呈现用户列表。在该部分中，我称
async mounted() {
await this.fetch();
}
初始化商店。之后，商店 getter 将返回users数组，并呈现列表。我知道我也可以通过getter通过id获取一件物品
getById: state => id => state.users.find(user => user.id === id)当导航到用户详细信息页面
/users/:id时，我可以利用它，通过this.$router.currentRoute.params.id提取userId并呈现用户详细信息。但是，如果我直接加载该路线怎么办？然后，商店用一个空的用户数组初始化，它将找不到一个用户。那么，我应该在该用户详细信息 View 的
mounted挂钩中再次获取所有用户吗？我认为直接调用axios服务将是一种反模式，因为资源说我应该将Vuex用作组件和API之间的接口(interface)。从api获取所有用户时是否有最佳实践？因为让我们想象您导航到另一个页面，该页面将所有用户加载到一个选择组件中，所以我应该从 setter/getter 中获取他们吗？也许它将加载一个不再存在的用户。但是每X秒对所有用户进行一次轮询也很糟糕...
什么是更新商店数据以使整个应用程序中的所有组件均可访问的正确方法？
最佳答案
我不同意应该使用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。