title: Accessing vue-router from actions.ts
body: <p>How do we get access to the Vue router instance from within our actions.ts file?  <code>this.$router</code> and <code>this.$route</code> aren't available in the following context:</p>
  
  <p>boot.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue';
  import VueRouter from 'vue-router';
  import routes from './routes';
  import store from './services/store'
  import * as log from 'loglevel'
  
  Vue.use(VueRouter);
  
  log.setLevel("trace");
  
  const router = new VueRouter({
      routes,
      linkActiveClass: "active"
  });
  
  new Vue({
      el: '#app-root',
      router: router,
      store: store,
      render: h =&gt; h(require('./layouts/app.vue.html'))
  });
  </code></pre>
  
  <p>actions.ts:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { http, httpClass } from './http';
  import { DomainAppModel } from '../models/domainApps';
  import Vue from 'vue';
  
  var actions = {
      LOGOUT: function ({ commit }, params) {
          return new Promise((resolve, reject) =&gt; {
              http.logout().then(result =&gt; {
                  commit('CLEAR_STATE');                
                  // this.$router and this.$route not available
                  this.$router.push({
                      path:"login", 
                      query: {
                          sessionTimedout: true,
                          redirect: this.$route.fullPath
                      }
                  });
              });
          });      
      }
  }
  
  export default actions
  </code></pre>