action not found in Vuex store

Question

I'm following a course here:

https://thinkster.io/tutorials/nuxt-js-project/adding-authentication

I am working on adding authentication to my app and have login/logout buttons that partially work with firebase authentication. I can log in fine, but the issue is that when I'm logged in, the action in my Vuex store doesn't seem to run, therefore leaving the user logged in and the state not updating to display the logout button.

default.vue

<template>
  <v-app>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="miniVariant"
      :clipped="clipped"
      fixed
      app
    >
      <v-list>
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title v-text="item.title" />
          </v-list-item-content>

        </v-list-item>
        <button v-if="!mySession" @click="login">Login</button>
        <button v-else @click="logout">Logout</button>
      </v-list>
    </v-navigation-drawer>
    <!-- <v-toolbar fixed app :clipped-left="clipped">
      <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
      <v-tool-bar-title v-text="title"></v-tool-bar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <v-btn @click="login">Login</v-btn>
        <v-btn @click="logout">Logout</v-btn>
      </v-toolbar-items>
    </v-toolbar> -->
    <v-app-bar
      :clipped-left="clipped"
      fixed
      app
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />

      <v-btn
        icon
        @click.stop="clipped = !clipped"
      >
        <v-icon>mdi-application</v-icon>
      </v-btn>
      <v-btn
        icon
        @click.stop="fixed = !fixed"
      >
        <v-icon>mdi-minus</v-icon>
      </v-btn>
      <v-toolbar-title v-text="title" />
      <v-spacer />
    </v-app-bar>
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
    <v-navigation-drawer
      v-model="rightDrawer"
      :right="right"
      temporary
      fixed
    >
      <v-list>
        <v-list-item @click.native="right = !right">
          <v-list-item-action>
            <v-icon light>
              mdi-repeat
            </v-icon>
          </v-list-item-action>
          <v-list-item-title>Switch drawer (click me)</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-footer
      :fixed="fixed"
      app
    >
      <span>&copy; 2019</span>
    </v-footer>
  </v-app>
</template>

<script>
import {db} from '@/plugins/firebase'
import firebase from 'firebase/app'
import 'firebase/auth'

export default {
  created() {
    this.$store.dispatch('setSession');
  },
  data () {
    return {
      clipped: false,
      drawer: false,
      fixed: false,
      items: [
        {
          icon: 'mdi-apps',
          title: 'Welcome',
          to: '/'
        },
        {
          icon: 'cart',
          title: 'Checkout',
          to: '/checkout'
        }
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: 'Vuetify.js'
    }
  },
  methods: {
    login() {
      console.log('login');
      let provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth()
      .signInWithPopup(provider)
      .then(function(result) {
        console.log('signed in');
      })
      .catch(function(error) {
        console.log(error);
      })
    },
    logout() {
       console.log('logout');
       firebase.auth()
       .signOut()
       .then(() => {
         console.log('sign out')
       }).catch((error) => {
         console.log(error)
       })
    }
  },
  computed: {
    mySession() {
      return this.$store.getters.session;
    }
  }
}
</script>

store/index.js

import Vuex from 'vuex'
import firebase from 'firebase/app'
import 'firebase/auth'

const createStore = () => {
  return new Vuex.Store({
    state: {
        session: false
    },
    mutations: {
        SET_SESSION(state, session) {
            state.session = session;
        }
    },
    getters: {
        session: state => state.session
    },
    actions: {
        setSession({commit}) {
            firebase.auth().onAuthStateChanged(user => {
                console.log(user);
                console.log('change');
                commit('SET_SESSION', user || false);
            })
        }
    }
  })
}

export default createStore

in console I am getting an error message that says:

"[vuex] unknown action type: setSession"

To reiterate, I can login using Google oauth, but when logged in, the state does not change and the logout button does not appear.

Thanks for the help!

Update:

Well now I'm extra confused. I did push updates 15 mins ago but for some reason my store/index.js file is outdated and isn't updating/saving? I have no idea what I'm doing wrong.

When looking at my store/index.js file on Github, it shows the default template: https://github.com/SIeep/US-kratom/blob/master/US-Kratom/store/index.js

But what I have, and what was just copied from the course I'm taking is:

import Vuex from 'vuex';
import firebase from 'firebase/app';
import 'firebase/auth';

const createStore = () => {
  return new Vuex.Store({
    state: {
      session: false,
      products: []
    },
    mutations: {
      SET_SESSION(state, session) {
        state.session = session;
      },
      SET_PRODUCT(state, product) {
        state.products = product;
      }
    },
    getters: {
      session: state => state.session,
      products: state => state.products
    },
    actions: {
      setSession({ commit }) {
        firebase.auth().onAuthStateChanged(user => {
          commit('SET_SESSION', user || false);
        });
      },
      setProduct({ commit }, products) {
        commit('SET_PRODUCT', products);
      }
    }
  });
};

export default createStore;

I am saving the file and everything but it's not updating on Github which is obviously the issue with my app as well.

Answer 1

Erik from Thinkster.io ended up fixing the code for me. Update is here:

[https://github.com/SIeep/US-kratom/commit/bd55deacadfc065edc7df9c1365ae832a32b9b43][1]