vue-session vue-session not working for me

I have put

import VueSession from 'vue-session'
Vue.use(VueSession)

in my main.js file.

When I try to use the session with this.$session.start();

I get the error

vue.esm.js?65d7:563 TypeError: Cannot read property 'start' of undefined
    at VueComponent.login (Login.vue?4983:36)
    at boundFn (vue.esm.js?65d7:179)
    at Proxy.invoker (vue.esm.js?65d7:1821)
    at Proxy.Vue.$emit (vue.esm.js?65d7:2331)
    at click (mdButton.vue?3bf8:38)
    at HTMLButtonElement.invoker (vue.esm.js?65d7:1821)

Oct 06 '17 17:10 simonjcarr

Where did you try to use this.$session? What part of the code?

Oct 09 '17 22:10 victorsferreira

I have exactly the same problem. I used "this.$session" in another component.

Oct 18 '17 09:10 michaelscheurer

I have also same issue

Dec 12 '17 16:12 donaldinos

Hey guys, You should add more code so I could try to understand and reproduce it in my environment.

But here is something I found out: if you are using it in a method, for example, and you defined the method with arrow functions:

methods: {
   foo: ()=>{
      this.$session.start()
   }
}

It fails so bad. I don't know why but it doesn't keep the context. In this case, just rewriting it to:

methods: {
   foo: function(){
      this.$session.start()
   }
}

Should be good enough

Jan 25 '18 01:01 victorsferreira

Hello, I have the same problem, this is my code.

Thanks for you time.

the main.js file:

import VueCookies from 'vue-cookies'
import VueSession from 'vue-session'
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import AWS from 'aws-sdk'

Vue.use(VueCookies)


Vue.use(AWS)
Vue.use(Vuetify, { theme: {
  primary: '#00bfa5',
  secondary: '#424242',
  accent: '#82B1FF',
  error: '#ff1744',
  info: '#2979ff',
  success: '#4CAF50',
  warning: '#FFC107'
}})
var options = {
  persist: true
}

Vue.use(VueSession, options)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

login.vue file:

<template>
  
</template>

<script>

import r from '@/router/index'
var request = require('request')

export default {
  name: 'login',
  data () {
    return {
      valid: true,
      username: '',
      nameRules: [(v) => !!v || 'Se requiere nombre de usuario'],
      password: '',
      passwordRules: [(v) => !!v || 'Se requiere contraseña'],
      checkboxRules: [v => !!v || 'Debe aceptar para continuar!'],
      checkbox: false
    }
  },
  methods: {
    submit: function () {
      if (this.$refs.form.validate()) {
        request({
          url: 'myUrls/usuarios/acceder',
          method: 'POST',
          followAllRedirects: true,
          jar: true,
          form: {
            username: this.username,
            password: this.password
          }
        }, function (error, response, body) {
          if (error) {
            console.log(error)
          } else {
            console.log(response.statusCode, body)
            if (response.statusCode === 404 || response.statusCode === 403) {
              r.push({name: 'Login'})
            }
            if (response.statusCode === 200) {
              var user = JSON.parse(body)
              this.$session.start()
              r.push({name: 'Cliente', params: {usuarioId: user}})
            }
          }
        })
      }
    },
    clear () {
      this.$refs.form.reset()
    }
  }
}
</script>

Feb 18 '18 01:02 hatimsue

@hatimsue it looks like you are trying to call this.$session.start() inside a callback function of request(...). So your this points to the wrong context.

just cache your this context with var self = this in front of the request call and call it inside the callback with self.$session.start() like this:

  ...
  methods: {
    submit: function () {
      var self = this
      if (this.$refs.form.validate()) {
        request({
        ...
        }, function (error, response, body) {
        ...
        self.$session.start()
        ...
        })
      }
    },
   ...

This should fix it. Maybe @simonjcarr has a similar context problem like this.