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

在我看来，开两家商店绝对不是解决方案，尝试分成 2 个模块。在这里找到更多：https://vuex.vuejs.org/guide/modules.html

Answer 2

凭直觉，我会做类似的事情。还没有测试过，但它可能还没有准备好使用。

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

Vuex store 的多个实例

Multiple instances of Vuex store

javascript

vue.js

vuex

vuejs2