[Vuejs]-Nuxt Vuex State and Getters Has Data But Grayed Out

by

0👍

✅

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
};

Leave a comment