Nuxt Vuex State and Getters Has Data But Grayed Out - vue.js

Question

I was trying to pull data out of getters with a v-for but I kept getting nothing back so I decided to console log 'this.$store.getters.tiers' and it came back undefined.
The data shows up in the Vue Browser tab, but both State and Getters appear grayed out unless I manually click on that arrow. Is the blank data related to this, or something that I forgot in my code?
Thanks for the help!
import Vue from "vue";
import { mapGetters } from "vuex";
computed: {
tiers() {
return this.$store.getters.tiers;
},
...mapGetters(["loggedInUser"])
},
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: () => ({
tiers: [
{
id: 1,
name: "Director Subscription",
price: 25
},
{
id: 2,
name: "Regular Subscription",
price: 10
},
{
id: 3,
name: "Regular+ Subscription",
price: 15
}
],
StoreCart: []
}),
getters: {
tiers: state => state.tiers,
StoreCart: state => state.StoreCart
},
mutations: {
ADD_Item(state, id) {
state.StoreCart.push(id);
},
REMOVE_Item(state, index) {
state.StoreCart.splice(index, 1);
}
},
actions: {
addItem(context, id) {
context.commit("ADD_Item", id);
},
removeItem(context, index) {
context.commit("REMOVE_Item", index);
}
},
modules: {}
});
export const getters = {
isAuthenticated(state) {
return state.auth.loggedIn;
},
loggedInUser(state) {
return state.auth.user;
}
};

Answer 1

Edit: Figured it out!
I'm running Nuxt and after revising the docs, I realized that the framework already builds a lot of the objects that would otherwise need to be created when using vanilla Vuex. Below is the correct way to set up the store!
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
};