Vuex store 的多个实例

Posted 2023-02-16

【中文标题】Vuex store 的多个实例

【英文标题】：Multiple instances of Vuex store

【发布时间】：2022-01-19 11:08:24

【问题描述】：

我必须关注 vue2/vuex 的情况；假设我有一个用户模块，用于存储从我的 api 获取的所有用户。

我使用这个模块来填充，例如，包含所有用户的下拉列表。

现在我也有一个用户页面，但是这个页面有过滤、分页用户等选项。这发生在服务器端，因此模块将使用新的（过滤的）用户列表进行更新。

我应该为两个用例（usersOptions 和 usersView）创建两个单独的模块吗？对我来说，创建两个用户存储实例似乎更合乎逻辑，但显然这对于​​ Vuex 是不可能的。遇到这种情况你会怎么处理？

这是我的用户模块的示例：

import UserRepository from '@/repositories/UserRepository';

export default 
  namespaced: true,
  state: 
    loading: false,
    users: [],
  ,
  getters: 
    isLoading(state) 
      return state.loading;
    ,
    data(state) 
      return state.users;
    ,
    options: (state) => (value = 'id', label = 'name') => state.users.map(
      (user) => ( value: user[value], label: user[label] ),
    ),
  ,
  mutations: 
    SET_LOADING(state, payload) 
      state.loading = payload;
    ,
    SET_DATA(state, payload) 
      state.users = payload;
    ,
  ,
  actions: 
    fetch( commit ) 
      return new Promise((resolve, reject) => 
        commit('SET_LOADING', true);
        UserRepository.index( limit: 0 )
          .then((response) => 
            const users = response.data.data;
            commit('SET_DATA', users);
            resolve(response);
          )
          .catch((error) => 
            reject(error);
          )
          .finally(() => 
            commit('SET_LOADING', false);
          );
      );
    ,
  ,
;

【问题讨论】：

很难说不知道your code。这实际上取决于您如何在商店中保存数据。你能和我们分享一下吗？

我已经用我的用户模块示例更新了我的帖子。

谢谢！您能告诉我们您可以用来请求完整或过滤/分页数据的不同网址吗？

对于我将使用/api/users/search?limit=0 的选项和填充视图我将使用/api/users/search?limit15&page=1 并使用JSON 有效负载进行过滤或排序（[field: "name", direction: "desc"])

好的，我添加了这个作为答案。我没有添加对过滤器/排序的支持，但我想你会明白的。

【参考方案1】：

直觉上，我会做这样的事情。尚未测试，但它可能还没有准备好使用。

import UserRepository from '@/repositories/UserRepository';

export default 
  namespaced: true,
  state: 
    loading: false,
    users: [],
  ,
  getters: 
    isLoading(state) 
      return state.loading;
    ,
    data(state) 
      return state.users;
    ,
    usersView() 
      return state.users.view;
    ,
    usersOptions() 
      return state.users.options;
    ,
    options: (state) => (value = 'id', label = 'name') => state.users.map(
      (user) => ( value: user[value], label: user[label] ),
    ),
  ,
  mutations: 
    SET_LOADING(state, payload) 
      state.loading = payload;
    ,
    SET_DATA(state, key, payload) 
      state.users[key] = payload;
    ,
  ,
  actions: 
    fetch( commit , params) 
      return new Promise((resolve, reject) => 
        commit('SET_LOADING', true);
        UserRepository.index(params)
          .then((response) => 
            resolve(response.data.data);
          )
          .catch((error) => 
            reject(error);
          )
          .finally(() => 
            commit('SET_LOADING', false);
          );
      );
    ,
    fetchOptions() 
        this.dispatch('fetch',  limit: 0 ).then((users)             
            commit('SET_DATA', 'options', users);
        )
    ,
    fetchView() 
        this.dispatch('fetch',  limit: 15, page: 1 ).then((users)             
            commit('SET_DATA', 'view', users);
        )
    ,
  ,
;

【讨论】：

谢谢，这似乎是一个非常可靠的解决方案。

不客气。

【参考方案2】：

在我看来，两个商店从来都不是灵魂， 尝试分离为 2 个模块。 在这里找到更多：https://vuex.vuejs.org/guide/modules.html

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

我刚刚意识到我一直在使用术语“商店”，而我应该使用术语“模块”。我已经更新了我原来的帖子。