Vue - instance variables does not work

Question

I am migrating my project to Vue-cli and the instance variables are not working:

main.js

Vue.$storage = Vue.prototype.$storage = new SecureLs({encodingType: 'rc4', isCompression: true, encryptionSecret: 'fasdfasdf'})
Vue.$defines = Vue.prototype.$defines = Defines

app.

computed: {
    user_email: () => {
      console.log(this.$defines) // undefined
      console.log(this.$storage) // undefined
      return ''
    }
  },

But the template works correctly:

{{ $storage.get('user') }}
{{ $defines }}

The same problem occurs with $store, $nextTick, etc..

EDIT: Even doing the installation via plugin, the problem continues:

<template>
  <span class="caption">{{ $storage }}</span> <!-- Apresenta o valor na tela corretamente -->
</template>

<script>
export default {
  name: 'App',
  mounted: () => {
    console.log(this.$storage)  // Retorna UNDEFINED
  }
}
</script>

Answer 1

PROBLEM AND SOLUTION

I found that the problem is the standard ES6 for function declaration:

Works:

mounted() {
  console.log(this.$storage)
}

mounted: function() {
  console.log(this.$storage)
}

Doesn’t work

mounted: () => {
   console.log(this.$storage)
}

When using Arrow functions ( () => {} ) in JS, the value of this refers to the parent scope of the function. All functions that use this must be normal functions (Function(){}).

Answer 2

Write your own plugins and use together with Vue.
I wrote an example working with Codesanbox, give a look by clicking here.

./store js.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    hello: "Hello from vuex"
  },
  mutations: {},
  actions: {}
});

./plugins/Storage.js

import SecureLS from "secure-ls";

export default {
  install(Vue, options) {
    Vue.prototype.$storage = new SecureLS({
      encodingType: "rc4",
      isCompression: true,
      encryptionSecret: "fasdfasdf"
    });
  }
};

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Storage from "./plugins/storage";

Vue.config.productionTip = false;

Vue.use(Storage);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

./views/Home.Vue

<template>
  <div class="home">
    <h1>{{ $store.state.hello }}</h1>
    <br>
    <h3>My Plugin Secure LS</h3>
    <b>{{ $storage.get("demo") }}</b>
  </div>
</template>

<script>
export default {
  name: "Home",
  created() {
    this.$storage.set("demo", { data: "Hello from Local Storage" });
  }
};
</script>