在v-for中动态访问vuex数据

// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'

Vue.use(Vuex)

new Vue({
  el: '#app',
  store,
  ...
})

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    items: ['item1', 'item2', 'item3']
  },
  mutations: {
    addItem(state, item) {
      state.items.push(item)
    }
  },
  actions: {
    addItemAsync({ commit }, item) {
      setTimeout(() => {
        commit('addItem', item)
      }, 1000)
    }
  },
  getters: {
    getItemByIndex: (state) => (index) => {
      return state.items[index]
    }
  }
})

export default store

// Component.vue
<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }} - {{ getItemByIndex(index) }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getItemByIndex']),
    items() {
      return this.$store.state.items
    }
  },
  methods: {
    ...mapActions(['addItemAsync'])
  },
  mounted() {
    this.addItemAsync('item4')
  }
}
</script>