在VueJS中查看存储在Vuex中的数组

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    myArray: [] // 定义一个空数组
  },
  mutations: {
    updateArray(state, newArray) {
      state.myArray = newArray // 更新数组状态
    }
  },
  actions: {
    fetchArray({ commit }) {
      // 异步获取数组数据的操作
      // 可以通过API请求或其他方式获取数据
      const newArray = [1, 2, 3, 4, 5] // 假设获取到的数组数据
      commit('updateArray', newArray) // 提交mutation更新数组状态
    }
  },
  getters: {
    getArray: state => {
      return state.myArray // 获取数组状态
    }
  }
})

export default store

// MyComponent.vue
<template>
  <div>
    <button @click="fetchArray">获取数组</button>
    <ul>
      <li v-for="item in myArray" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

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

export default {
  computed: {
    ...mapGetters(['getArray']), // 映射getArray getter
    myArray() {
      return this.getArray // 获取映射的数组状态
    }
  },
  methods: {
    ...mapActions(['fetchArray']) // 映射fetchArray action
  }
}
</script>