拆分store并配置全局getter

在Vue.js中，你可以通过拆分Vuex的store并配置全局getter来组织和管理应用的状态。这样做可以提高代码的可维护性和可扩展性。下面是一种常见的拆分Vuex store并配置全局getter的方法：

1. 创建模块： 首先，你可以将Vuex store拆分为多个模块，每个模块管理一部分状态和相关的操作。例如，你可以创建一个user模块来管理用户相关的状态和操作，一个cart模块来管理购物车相关的状态和操作，等等。在每个模块中，你可以定义状态、mutations、actions等。

示例代码：

// user.js
const state = {
  user: null
};

const mutations = {
  SET_USER(state, user) {
    state.user = user;
  }
};

const actions = {
  fetchUser({ commit }) {
    // 异步获取用户信息
    // 然后提交mutation更新state
    commit('SET_USER', { /* 用户信息 */ });
  }
};

export default {
  namespaced: true, // 命名空间，确保模块的状态和操作在全局中唯一
  state,
  mutations,
  actions
};

2. 组合模块： 接下来，你需要在Vuex的根store中组合这些模块。通过modules配置项，你可以将拆分的模块合并为一个完整的store。

示例代码：

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
import cart from './modules/cart';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    user,
    cart
  }
});

3. 全局getter： 要在全局中访问模块的状态，你可以在根store中定义全局getter。全局getter允许你从根store的getter中访问不同模块的状态。

示例代码：

// 在根store的getter中访问模块的状态
const getters = {
  userName: (state, getters, rootState) => {
    return rootState.user.user ? rootState.user.user.name : '';
  },
  cartTotal: (state, getters, rootState) => {
    return rootState.cart.items.reduce((total, item) => total + item.price, 0);
  }
};

在上述示例中，userName getter从user模块的状态中获取用户名，而cartTotal getter从cart模块的状态中计算购物车的总价。

总结： 通过拆分Vuex store为多个模块，并在根store中配置全局getter，你可以更好地组织和管理应用的状态。这种方式提高了代码的可维护性，使得状态和操作更具可扩展性，同时在全局中访问模块的状态也变得更加方便。