When I try to access the vuex store inside a random component, undefined is returned. However, I injected the store into my Vue object. Does anyone know how to solve this? I could import the store object into every component manually, but that's not really clean...
My files look like this:
main.js
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import VueI18n from 'vue-i18n'
import routes from './config/routes'
import locales from './lang/locales'
import store from './store'
//Routing support
Vue.use(VueRouter);
//Backend support
Vue.use(VueResource);
//Language support
Vue.use(VueI18n);
Vue.config.lang = 'nl';
Object.keys(locales).forEach(function (lang) {
Vue.locale(lang, locales[lang])
});
const router = new VueRouter({
store,
mode: 'history',
base: '/app/',
routes: routes
});
new Vue({
router
}).$mount('#app');
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import fleet from './modules/fleet'
Vue.use(Vuex)
export default new Vuex.Store({
modules : {
fleet
}
})
app.vue
<template>
<div id="page-content-wrapper">
<nav-bar></nav-bar>
<div class="container-fluid">
<div class="row">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import NavBar from './assets/navBar.vue'
export default {
created() {
console.log(this.$store)
},
components: {
NavBar
}
}
</script>
this.$store returns undefined
const router = new VueRouter({
store,
mode: 'history',
base: '/app/',
routes: routes });
new Vue({
router }).$mount('#app');
Store is designed to be set up in new Vue:
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
You've placed it into VueRouter instance instead.
Proper code combined:
const router = new VueRouter({
routes,
mode: 'history',
base: ...
});
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
Related
I'm trying to render my vue components inside the router-view tag. But it gives me an error
TypeError: route is undefined
But I didn't use the word route in anywhere. This is my code.
App.vue
<template>
<div id="app">
<my-header></my-header>
<router-view></router-view>
<my-footer></my-footer>
</div>
</template>
outerroutes.js
import welcome from './components/welcome.vue';
import insideSystem from './components/insideSystem.vue';
import forgotPassword from './components/forgotPassword.vue';
export const routes = [
{path:'',component:welcome},
{path:'/insideSystem',component:insideSystem},
{path:'/forgotPassword',component:forgotPassword}
];
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import {routes} from './outerroutes';
Vue.use(VueRouter);
const router = new VueRouter({
routes,
mode:'history'
});
new Vue({
el: '#app',
routes,
render: h => h(App)
})
I'm wondering where is this route came from.
You are creating a router instance as follows;
const router = new VueRouter({
routes,
mode:'history'
});
But you should inject the router instance to router option in the root vue instance not routes
new Vue({
el: '#app',
router,
//routes, not this
render: h => h(App)
})
In outerroutes.js:
{path:'',component:welcome},
There is nothing defined. Try:
{path:'/',component:welcome},
Additionally, I'm not sure that you need the curly braces around routes in main.js at:
import {routes} from './outerroutes';
I'm trying to get my head round vue-router. I'm used to instantiating Vue like this...
vm = new Vue({
el : '#vueRoot',
data : { msg : 'hello' }
...
})
Now I'm being asked to instantiate it passing the router...
vm = new Vue({
router
}).$mount('#vueRoot');
My question is where do I put my data or methods, or whatever other Vue properties I would normally use? I see that my root Vue can have markup, with router-link elements. Am I to understand that, once I use the router, everything should be in components?
You can use your default notation:
new Vue({
el: '#app',
router,
template: '<MyApp/>',
components: { MyApp }
})
But you must have a <router-view/> Element in your template.
In your Main.js
window.Vue = require('vue');
import VueRouter from 'vue-router'
import Overview from '../components/Overview.vue';
import Sale from '../components/Sale.vue';
Vue.use(VueRouter);
let routes = [
{path: '/home', component: Overview,name:'Overview'},
{path: '/sale', component: Sale, name:'Sale'},
];
const router = new VueRouter({
mode: 'history',
routes
});
const app = new Vue({
el: '#vueRoot',
router,
});
In your Root View place element
<router-view></router-view>
In your links
<router-link to="/sale" class="nav-link">
<i class="nav-icon fas fa-cart-plus "></i>
<p>
Point of Sale
</p>
</router-link>
In your Views
<template>
<v-app>
{{viewTitle}}
{{viewSubtitle}}
</v-app>
</template>
<script>
export default {
data() {
return {
viewTitle:'Home',
viewSubtitle:'description',
}
},
methods: {
YourMethod_1() {
},
YourMethod_2() {
},
}
}
</script>
This is how the latest versions of Vue.js works with router
import App from './App';
import VueRouter from 'vue-router';
import {routes} from './routes';
const router = new VueRouter({
routes,
mode: "history", // you can remove this if not required
});
new Vue({
el: '#app',
router,
render: h => h(App)
});
routes.js
export const routes = [
// your components as objects
]
App.vue
<template>
<div>
<router-view/>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
I am a noob to vue-router. Here is my code,I want to render User compoent, when I navigate to http://localhost:8080/users
App.vue file:
<template>
<div id="app">
<h1>{{msg}}</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
Users.vue
<template>
<div>
<h1>xue yan</h1>
</div>
</template>
main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Users from './Users.vue'
Vue.use(VueRouter);
const routes = [
{path:'/users',component:Users}
];
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
But, I can't see the Users component in my index.html,when I try to navigate to "http://localhost:8080/users".All the files come from vue-cli webpack-simple. what's more, there is no error in console.I can't tell what's wrong with it.
add history mode to your router as follows
const router = new VueRouter({
mode: 'history',
routes,
});
Without history mode on you need to add # in your search like this http://localhost:8080/#/users to make it work.
More about why history mode read the docs here
I use webpack with Single File Component.
I have 1 instance of Vue in my menu header to show a Cart Shopping dropdown :
import Vue from 'vue';
import App from './AppShoppingCart.vue';
new Vue({
el: '#shoppingCartApp',
template: '<App/>',
components: {App}
});
I have an other Vue instance in the same page (the catalog with products) :
import Vue from 'vue';
import App from './AppCatalog.vue';
new Vue({
el: '#catalogApp',
template: '<App/>',
components: {App}
});
I want to $emit an event from one instance to the other :
when Catalog change, I want to call a function in ShoppingCart.
I test eventHub :
import Vue from 'vue';
var eventHub = new Vue();
export default eventHub;
So I import event on each instance :
import eventHub from './events/eventHub';
In Catalog :
eventHub.$emit( "actproductslist-changed" );
In ShoppingCart :
eventHub.$on('actproductslist-changed', function(){ alert('AppShoppingCart') } );
But this won't works. It only works if the $on and $emit are in the same instance of Vue.
I think webpack create 2 modules and I can't share variables between my 2 instances.
Any one have an idea to have global variable with multiple instance with webpack ?
This setup works, where main.js is your entry point.
bus.js
import Vue from "vue"
const bus = new Vue();
export default bus;
main.js
import Vue from 'vue'
import App from './App.vue'
import App2 from './App2.vue'
new Vue({
el: '#app',
render: h => h(App)
})
new Vue({
el:"#app2",
render: h => h(App2)
})
App.vue
<template>
<button #click="sendMessage">Send Message</button>
</template>
<script>
import Vue from "vue"
import bus from "./bus"
export default {
methods:{
sendMessage(){
bus.$emit("testing")
}
}
}
</script>
App2.vue
<template></template>
<script>
import Vue from "vue"
import bus from "./bus"
export default {
mounted(){
bus.$on("testing", ()=> alert("message received"));
}
}
</script>
Post comment edit
To communicate across entry points, you can expose the bus Vue on the window.
webpack.config.js
entry: {
"main": './src/main.js',
"main2": './src/main2.js'
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: '[name].js'
},
bus.js
import Vue from "vue"
window.bus = new Vue();
main.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})
main2.js
import Vue from 'vue'
import App2 from './App2.vue'
import bus from "./bus"
new Vue({
el:"#app2",
render: h => h(App2)
})
App.vue
<template>
<button #click="sendMessage">Send Message</button>
</template>
<script>
import Vue from "vue"
export default {
methods:{
sendMessage(){
if (bus)
bus.$emit("testing")
}
}
}
</script>
App2.vue
<template></template>
<script>
import Vue from "vue"
export default {
mounted(){
bus.$on("testing", ()=> alert("message received"));
}
}
</script>
Note here that since bus is only imported in main2.js, you need to guard the use of it in App.vue for those cases where it might not exist (because it is only imported in main2.js).
Build A Single page app with vue 2 and vue-router 2 and vuex 2, but do not update
/src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { sync } from 'vuex-router-sync'
sync(store, router)
new Vue({
router,
store,
...App
}).$mount('#app')
/src/router/index.js
import Vue from 'vue'
import routes from './routes'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes
})
export default router
/src/router/routes.js
import loader from './loader'
const routes = [
{ path: '/index', name: 'index', component: (r) => require(['./../views/index.vue'], r) }
]
export default routes
/src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {}
})
export default store
/src/view/index.vue
<template>
<div>
<h1>Hello index</h1>
</div>
</template>
<script>
import loader from './../../../router/loader'
export default {
name: 'index',
created () {
console.log('This is index')
}
}
</script>
/src/App.vue
<template>
<div id="app">
<router-link :to="'index'">index</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
mounted () {
console.log('Hello App')
}
}
</script>
I do not know what's wrong with the code, the <router-view> do not update when I change the route.
I think your app is not properly initialized yet. You are starting your app as follows:
new Vue({
router,
store,
...App
}).$mount('#app')
You have the spread operator ...App, which is not necessary - it is used to convert array items to function args, and not correct in this context. Instead you should use the render function as provided in webpack template :
/* eslint-disable-line no-new */
new Vue({
el: "#app",
store,
router,
render: h => h(App)
})
Also you have attempted to import loader in routes and index, which is not necessary if you are using vue-cli.
Maybe you can start with the webpack template as base and slowly add functionality one step at a time: start with route definitions and your route components, ensure that everything works, and finally add vuex.
$mount('#app') is fine, I think the problem is your routes.js
Try this instead:
import Index from './../views/index.vue'
const routes = [
{ path: '/index', name: 'index', component: Index }
]
And here is a working webpack template which is already configured vue-router and vuex properly, you can initialize this template via vue-cli, for your reference: https://github.com/CodinCat/vue-webpack-plus