【Vuex】Rails(devise_token_auth)+Vue.jsのSPAでサインアウトするサンプルコード

OS: macOS Catalina 10.15.1
Ruby: 2.6.5
Rails: 6.0.2.1
Vue: 2.6.10
vuex: 3.1.2
axios: 0.19.0

import 'babel-polyfill'
import Vue from 'vue'
import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {
//ヘッダの入れ物を用意。
    headers: null,
  },

  mutations: {

//サインイン時のレスポンスヘッダから情報を抜き出して保存しておく。
    signIn(state, payload) {
      state.headers = {
        "access-token": payload["access-token"],
        "client": payload["client"],
        "uid": payload["uid"],
      };
    },

//サインアウトしたらヘッダを空にしておく。
    signOut(state) {
      state.headers = null;
    },
  },

  actions: {
//paramsはemailなどのユーザー情報が入っていると思って下さい。
//（paramsへの情報の入れ方は今回割愛。）
    signIn(context, params) {
      axios
        .post('/api/v1/auth/sign_in', params)
        .then(function (response) {
//ここでレスポンスヘッダを受け取る。
          context.commit('signIn', response.headers);
      })
    },
    signOut(context) {
      axios
//ここでヘッダ情報を呼び出してDELETEリクエストに含める
        .delete('/api/v1/auth/sign_out', { headers: context.state.headers })
        .then(function () {
          context.commit('signOut');
      })
    },
  },
})

export default store

import Vue from 'vue'
import App from '../App.vue' 
import store from './store.js' //こちら

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    store, //こちら
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
})

<template>
  <div>
    <button @click="signOut">ログアウト</button>
  </div>
</template>

<script>

  export default {
    methods: {
      signOut() {
        this.$store.dispatch('signOut')
      }
    }
  }
</script>