Vue.js Nuxt Vuex状态和Getters有数据，但显示为灰色

我试图用v-for从getters中提取数据，但一直没有得到任何结果，所以我决定控制台记录'this.$store.getters.tiers'，结果未定义

数据显示在Vue浏览器选项卡中，但除非手动单击该箭头，否则状态和getter都将显示为灰色。是与此相关的空白数据，还是我在代码中忘记的东西？

谢谢你的帮助

import Vue from "vue";
import { mapGetters } from "vuex";

computed: {
    tiers() {
      return this.$store.getters.tiers;
    },
    ...mapGetters(["loggedInUser"])
  },

---

编辑：找到答案

我正在运行Nuxt，在修改文档之后，我意识到框架已经构建了很多对象，这些对象在使用vanilla Vuex时需要创建。下面是建立商店的正确方法

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export const state = () => ({
  tiers: [
    {
      id: 1,
      name: "Director Subscription",
      price: 25
    },
    {
      id: 2,
      name: "Regular Subscription",
      price: 10
    },
    {
      id: 3,
      name: "Regular+ Subscription",
      price: 15
    }
  ],
  StoreCart: []
});

export const mutations = {
  ADD_Item(state, id) {
    state.StoreCart.push(id);
  },
 
  REMOVE_Item(state, index) {
    state.StoreCart.splice(index, 1);
  }
};
export const actions = {
  addItem(context, id) {
    context.commit("ADD_Item", id);
  },
  removeItem(context, index) {
    context.commit("REMOVE_Item", index);
  }
};


export const getters = {
  isAuthenticated(state) {
    return state.auth.loggedIn;
  },
  loggedInUser(state) {
    return state.auth.user;
  },
  tiers: state => state.tiers,
  StoreCart: state => state.StoreCart
};

---

请张贴完整的存储和完整的组件。我看到的第一件事是vuex存储的状态是一个返回对象的函数，但是vuex 3.x for vue 2的状态只需要是一个对象。您也可以在使用MapGetter中映射层，而不是像您一样重新创建它（…MapGetter（[“loggedInUser”，“tiers”]），但这可能不是问题所在

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export const state = () => ({
  tiers: [
    {
      id: 1,
      name: "Director Subscription",
      price: 25
    },
    {
      id: 2,
      name: "Regular Subscription",
      price: 10
    },
    {
      id: 3,
      name: "Regular+ Subscription",
      price: 15
    }
  ],
  StoreCart: []
});

export const mutations = {
  ADD_Item(state, id) {
    state.StoreCart.push(id);
  },
 
  REMOVE_Item(state, index) {
    state.StoreCart.splice(index, 1);
  }
};
export const actions = {
  addItem(context, id) {
    context.commit("ADD_Item", id);
  },
  removeItem(context, index) {
    context.commit("REMOVE_Item", index);
  }
};


export const getters = {
  isAuthenticated(state) {
    return state.auth.loggedIn;
  },
  loggedInUser(state) {
    return state.auth.user;
  },
  tiers: state => state.tiers,
  StoreCart: state => state.StoreCart
};