Vue2组件使用Vuex Getter结合v-for渲染数据无显示问题排查

Hey there! Let's figure out why your <li> items aren't showing up even though Vue Devtools confirms sourceData has hundreds of entries. Here are the most likely issues to check:

• Double-check how you're mapping Vuex state to your component
  If you're assigning sourceData to a component's data property in a hook like created, that's only a one-time copy—Vue won't sync updates from Vuex to this local data. Instead, use a computed property to directly reference the Vuex state, which stays reactive:

  import { mapState } from 'vuex';
  
  export default {
    computed: {
      ...mapState(['sourceData'])
      // Or manually: sourceData() { return this.$store.state.sourceData; }
    }
  }
  

• Verify your v-for implementation is correct
  Make sure the v-for is attached to the <li> element (not a parent like <ul>) and includes a unique key (required in Vue 2 for proper reactivity and rendering):

  <ul>
    <li v-for="item in sourceData" :key="item.id">{{ item.id }}</li>
  </ul>
  

  If you accidentally put v-for on the <ul>, you'll get duplicate lists instead of individual list items, which might look like nothing's rendering.

• Ensure Vuex state updates are reactive
  When populating data via AJAX, you must update Vuex state through mutations—and follow Vue's reactivity rules:

  • Never directly modify array indices or add new object properties without using Vue.set. Instead, replace the entire array or object to trigger reactivity:

    // In your Vuex mutation
    mutations: {
      SET_SOURCE_DATA(state, payload) {
        // Replace the array entirely (reactive)
        state.sourceData = [...payload];
        // Or if updating a single item: Vue.set(state.sourceData, index, newItem)
      }
    }
    

  • If you modify state directly outside a mutation (like in the AJAX callback), Vuex won't track the change, so your component won't re-render.

• Check for conditional rendering blockers
  Make sure there's no v-if directive on the <ul> or parent element that's preventing rendering. For example, if you have <ul v-if="isDataLoaded">, confirm isDataLoaded gets set to true after your AJAX request completes.

• Confirm the component is properly mounted
  If your component isn't mounted to the DOM at all (e.g., wrong selector in new Vue()), even with correct data, nothing will render. Double-check your root component mounting logic in the main entry file.

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