如何通过Vuex维护对象中属性的状态？以game的selectedPlayerIds为例

根据你的场景，我整理了两种更新selectedPlayerIds的方案，你可以根据业务需求灵活选择：

方案一：组件内本地管理（适合仅当前页面使用该数据） #

如果selectedPlayerIds只在当前页面生效，不需要全局共享，你可以直接在组件内调用Vuex的addPlayer后，响应式更新本地data里的数组：

在组件的methods中定义处理方法：

methods: {
  async addPlayerToGame(playerId) {
    // 先调用Vuex玩家仓库的addPlayer方法
    await this.$store.dispatch('players/addPlayer', playerId);
    
    // 响应式更新本地选中玩家列表（保持Vue的响应式特性）
    this.game.selectedPlayerIds = [...this.game.selectedPlayerIds, playerId];
    
    // Vue2中也可以用这种方式触发响应：
    // this.game.selectedPlayerIds.push(playerId);
    // this.$set(this.game, 'selectedPlayerIds', [...this.game.selectedPlayerIds]);
  }
}

这种方式逻辑简单直接，适合数据仅在当前页面流转的场景。

方案二：Vuex全局管理（适合多组件共享该数据） #

如果selectedPlayerIds需要在多个组件中访问或修改，建议把整个game对象移到Vuex中管理，保证全局数据的一致性：

第一步：创建Vuex的game模块 #

新建store/modules/game.js：

const state = {
  game: {
    ball: {
      name: "",
      date: new Date().toISOString().slice(0, 10)
    },
    selectedPlayerIds: []
  }
};

const mutations = {
  // 添加单个玩家到选中列表
  ADD_SELECTED_PLAYER(state, playerId) {
    // 避免直接修改原数组，保证响应式更新
    state.game.selectedPlayerIds = [...state.game.selectedPlayerIds, playerId];
  },
  // 可选：重置选中玩家列表
  RESET_SELECTED_PLAYERS(state) {
    state.game.selectedPlayerIds = [];
  },
  // 可选：更新ball的日期
  UPDATE_BALL_DATE(state, newDate) {
    state.game.ball.date = newDate;
  }
};

const actions = {
  // 封装完整逻辑：先添加玩家到仓库，再更新选中列表
  addPlayerToGame({ commit }, playerId) {
    return new Promise((resolve) => {
      this.dispatch('players/addPlayer', playerId)
        .then(() => {
          commit('ADD_SELECTED_PLAYER', playerId);
          resolve();
        });
    });
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

在store/index.js中注册该模块：

import Vuex from 'vuex';
import Vue from 'vue';
import players from './modules/players';
import game from './modules/game';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    players,
    game
  }
});

第二步：在页面组件中使用Vuex状态 #

通过mapState和mapActions映射状态与方法：

import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    // 把game状态映射到组件的计算属性
    ...mapState('game', ['game'])
  },
  methods: {
    // 把addPlayerToGame action映射到组件方法
    ...mapActions('game', ['addPlayerToGame'])
  },
  created() {
    // 可选：每次进入页面刷新ball的日期
    this.$store.commit('game/UPDATE_BALL_DATE', new Date().toISOString().slice(0, 10));
  }
};

这样game对象（包括selectedPlayerIds）就完全由Vuex统一管理，任何组件都可以安全地访问或修改它，避免了多组件数据不一致的问题。

你可以根据实际业务场景选择方案：如果数据仅当前页面使用，方案一足够轻便；如果需要多组件共享数据，方案二更利于维护。

内容的提问来源于stack exchange，提问作者Dejan.S