Vuex Actions未返回数据，campaigns为空、currentCampaign undefined求助

Hey Justin, let's walk through the most common issues that could be causing these two problems with your Vuex store. Since you only shared a tiny snippet (});), I'll focus on typical pitfalls that lead to empty state and undefined values after mutations:

1. Why your campaigns state stays empty #

• Missing initial state setup: First, double-check your store's initial state. If you didn't initialize campaigns as an empty array (or appropriate default), it might stay empty even after you try to update it. Here's how it should look:

state: {
  campaigns: [], // Critical to set an initial value here
  currentCampaign: null
}

• Actions aren't committing mutations: If you're fetching campaigns via an async action, make sure the action actually commits the mutation with the fetched data. Skipping the commit or failing to dispatch the action entirely will leave campaigns empty. Example of a working action/mutation pair:

// Async action to fetch campaigns
async fetchCampaigns({ commit }) {
  try {
    const response = await yourApiClient.get('/campaigns');
    commit('SET_CAMPAIGNS', response.data); // This line updates the state
  } catch (err) {
    console.error('Failed to fetch campaigns:', err);
  }
}

// Mutation to set campaigns
SET_CAMPAIGNS(state, campaigns) {
  state.campaigns = campaigns;
}

• Direct state mutation outside mutations: Vuex requires state changes to happen only inside mutations. If you're trying to update campaigns directly (like this.$store.state.campaigns = newData), Vue won't track the change, and the state will appear empty. Always use mutations for state updates.

2. Why currentCampaign returns undefined after calling a mutation #

• Mutation isn't assigning the value correctly: Verify your mutation for currentCampaign—if it's not properly assigning the incoming value to the state, you'll get undefined. Here's a correct implementation:

SET_CURRENT_CAMPAIGN(state, campaign) {
  state.currentCampaign = campaign; // Ensure you're actually setting the state here
}

• Passing undefined to the mutation: When you commit the mutation from your component, make sure you're passing a valid campaign object. If you're passing undefined (e.g., trying to find a campaign that doesn't exist in campaigns), the mutation will set currentCampaign to undefined. Add a guard clause to avoid this:

// In your component method
selectCampaign(campaignId) {
  const selectedCampaign = this.$store.state.campaigns.find(c => c.id === campaignId);
  if (selectedCampaign) { // Only commit if we found a valid campaign
    this.$store.commit('SET_CURRENT_CAMPAIGN', selectedCampaign);
  } else {
    console.warn('No campaign found with ID:', campaignId);
  }
}

• Incorrect state access in components: If you're accessing currentCampaign before the mutation runs, or not using reactive access, you might see undefined. Use mapState to create a reactive computed property for safer access:

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['currentCampaign']) // This will react to state changes
  }
}

If you can share more of your store code (like the full state, mutations, and actions), I can give a more targeted fix—but these are the most likely issues to check first.

内容的提问来源于stack exchange，提问作者Justin