Vuex Pattern

main.js

// main.js
import Vue from 'vue';
import store from './store';
import App from './App';
new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

store/index.js

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import auth from './modules/auth';
Vue.use(Vuex);
export default new Vuex.Store({
  modules: {
    auth,
  }
});

store/modules/auth.js

// store/modules/auth.js
const state = {
  token: null,
}
const getters = {
  isLoggedIn: (state) => !!state.token,
}
const mutations = {
  setToken: (state, token) => {
    state.token = token;
  },
}
const actions = {
  login:({commit}, token) => {
    commit('setToken', token);
  },
  logout: ({commit}) => {
    commit('setToken', null);
  },
}
export default {
  state,
  getters,
  mutations,
  actions,
}

App.vue

// App.vue
<template>
  <div>
    <a v-if="isLoggedIn" href="#" @click="logout">Logout</a>
    <a v-else href="#" @click="$_login">Login</a>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
  name: 'App',
  computed: mapGetters(['isLoggedIn']),
  methods: {
    ...mapActions(['login', 'logout']),
    $_login() {
      this.login('this-is-a-token');
    },
  },
}
</script>