Reputation: 184
this is my app.js Have I defined the items correctly? I think I did my job right! In accordance with the vuex document
import store from "./store";
require('./bootstrap');
window.Vue = require('vue').default;
import vuetify from "./vuetify";
import router from "./router";
import AppComponent from "./components/AppComponent";
import Store from "./store"
const app = new Vue({
el: '#app',
vuetify,
router,
Store,
components:{
"app-component":AppComponent,
}
});
this is my store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const departmentRoute= [
{ icon: 'mdi-account-badge-outline', text: 'مدیریت مطالبات ' ,link:'demands'},
{ icon: 'mdi-account-badge-outline', text: 'مدیریت گزارشات ' ,link:'reports'},
];
const SuperAdminRoute= [
{ icon: 'mdi-account-group-outline', text: ' مدیریت کاربران ' ,link:'users'},
{ icon: 'mdi-account-badge-outline', text: 'مدیریت مطالبات ' ,link:'demands'},
{ icon: 'mdi-account-badge-outline', text: 'مدیریت گزارشات ' ,link:'reports'},
{ icon: 'mdi-account-badge-outline', text: 'آمار و ارقام ' ,link:'demands'},
];
const studentRoute= [
{ icon: 'mdi-account-group-outline', text: 'آخرین مطالبات به رای گذاشته شده' ,link:'selfDemand'},
{ icon: 'mdi-account-group-outline', text: 'مطالبات من ' ,link:'selfDemand'},
{ icon: 'mdi-account-badge-outline', text: ' پیگیری مطالبه ' ,link:'addReport'},
{ icon: 'mdi-checkbox-marked-circle-outline', text: 'تایید حساب کاربری' ,link:'verify'},
];
export default new Vuex.Store({
state: {
level: localStorage.getItem('role')
},
getters: {
items: state => {
switch (state.level) {
case "super-admin":
return SuperAdminRoute;
case "department":
return departmentRoute;
default:
return studentRoute;
}
}
}
})
and this is my app component script:
<script>
import { mapGetters } from 'vuex'
export default {
name: "MainDashboard",
props: {
source: String,
},
computed: {
...mapGetters(['items'])
},
data: () => ({
drawer: null,
title:'فاد | فارغ التحصیلی ناد',
}),
methods:{
logout() {
axios.post('/api/logout').then(res=>{
localStorage.removeItem('token');
localStorage.removeItem('role');
this.$router.push('/login');
}).catch(err=>{
});
}
}
}
</script>
when i use map getters in my componenet i can get my getters in vuex tab but i can't get it in component computed property ! why ? How can I troubleshoot?Could this error be due to invalid import vuex ?
Vuex Tab :
component :
Upvotes: 1
Views: 603
Reputation: 184
import Store from "./store"
to :
import store from "./store"
and my problem was solved !
Upvotes: 1
Reputation: 116
You must use store in app.js or main.js like this:
import Vue from "vue";
import App from "./App.vue";
import store from "./store";
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App),
store
}).$mount("#app");
if you use like import {store} from "./store";
you get this error.
Upvotes: 1