I have tried multiple different plugins with my Vue.js cli webpack projects and I am getting the same problem with all of them, namely that once I have included a plugin, I am unable to use it.
As an example. I have tried to use the plugin at this link. https://www.npmjs.com/package/vue-sessionstorage
Here is my main.js file
import Vue from 'vue'
import router from './router'
import VueMaterial from 'vue-material'
import { store } from './store'
import 'vue-material/dist/vue-material.css'
import 'vue-style-loader'
import VueSessionStorage from 'vue-sessionstorage'
import App from './App'
Vue.use(VueMaterial, VueSessionStorage);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: { App },
});
I have run npm install --save vue-sessionstorage
As you can see, I have also imported VueSessionStorage
However, when I try to use it like this
methods: {
login: function () {
console.log("Login clicked");
this.$session.set('username','simon')
console.log(this.$session.get('username'));
},
register: function () {
console.log(this.$session.get('username'));
}
}
I get the error
vue.esm.js?65d7:563 TypeError: Cannot read property 'set' of undefined
at VueComponent.login (Login.vue?2ddf:35)
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)
handleError @ vue.esm.js?65d7:563
Vue.$emit @ vue.esm.js?65d7:2333
click @ mdButton.vue?3bf8:38
invoker @ vue.esm.js?65d7:1821
Vue.use
does not permit multiple plugins to be initialized at once like that. Initialize them as two separate calls:
Vue.use(VueMaterial);
Vue.use(VueSessionStorage);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.