Vuex store 的多个实例

Question

我必须关注 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);
          });
      });
    },
  },
};

Answer 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);
        })
    },
  },
};

Answer 2

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