CODEWITHSUNDEEP
javascriptvue.js
ashimos
ashimos

Reputation: 21

VueJs got a blank page when using store or vuex

i have an vuejs app thats run fine, but when i add store to use vuex in my app the app keep display blank page and the console doens't have any error but when i check the source page i got


<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>signer-vue</title>
  <link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but signer-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>

main.js

import Vue from "vue";
import { createApp } from 'vue'
import App from "./App.vue";

import { BootstrapVue } from "bootstrap-vue";
import Donut from "vue-css-donut-chart";
import VueSweetalert2 from "vue-sweetalert2";
import VueTagsInput from "@johmun/vue-tags-input";
import VueFileAgent from "vue-file-agent";
import store from './store';

import router from "./router";

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";

import "vue-css-donut-chart/dist/vcdonut.css";

import "sweetalert2/dist/sweetalert2.min.css";

import "vue-file-agent/dist/vue-file-agent.css";

import "./assets/css/style.css";
import "./assets/css/signature-pad.css";
import "./assets/css/custom.css";
import "./assets/fonts/ionicons/css/ionicons.css";

import axios from 'axios';

axios.defaults.baseURL = 'http://127.0.0.1:8000'


Vue.use(BootstrapVue);
Vue.use(Donut);
Vue.use(VueSweetalert2);
Vue.use(VueTagsInput);
Vue.use(VueFileAgent);

Vue.config.productionTip = false;

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

/store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    user: {
      id: '',
      email: ''
    },
    isAuthenticated: false,
    token: ''
  },
  mutations: {
    initializeStore(state) {
      if (localStorage.getItem('token')) {
        state.token = localStorage.getItem('token')
        state.isAuthenticated = true
        state.user.username = localStorage.getItem('username')
        state.user.id = localStorage.getItem('userid')
      } else {
        state.user.id = ''
        state.user.username = ''
        state.token = ''
        state.isAuthenticated = false
      }
    },
    setToken(state, token) {
      state.token = token
      state.isAuthenticated = true
    },
    removeToken(state) {
      state.user.id = ''
      state.user.username = ''
      state.token = ''
      state.isAuthenticated = false
    },
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
  },
  modules: {
  }
})

App.vue

<template>
  <div id="app">
    <Header v-if="!checkingPage()" @toggle="toggleSidebar = !toggleSidebar" />
    <Sidebar v-if="!checkingPage()" :toggle="toggleSidebar" />
    <transition name="fade" mode="out-in">
      <router-view :key="$route.fullPath" />
    </transition>
    <Footer v-if="!checkingPage()" />
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import Sidebar from "./components/Sidebar.vue";
import axios from 'axios';

export default {
  name: "App",
  components: {
    Header,
    Footer,
    Sidebar
  },
  data() {
    return {
      toggleSidebar: false
      
    };
  },
  methods: {
    checkingPage() {
      return this.$route.name == "login" || this.$route.name == "login-alt"|| this.$route.name == "SignUp";
    }
  }
};
</script>

<style>
@import '../node_modules/bulma';
.fade-enter-active,
.fade-leave-active {
  transition-duration: 0.3s;
  transition-property: opacity;
  transition-timing-function: ease;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>

I have researched for this and cant find any such issues. I am a beginner in vue js and I am struggling in this for several days. Thanks in advance.

Upvotes: 2

Views: 826

Answers (1)

Rahil Arshad
Rahil Arshad

Reputation: 31

I fixed this by upgrading my vuex version from 3.x to 4.0.0. [N.B: I am using vue 3]. I am also providing my store and main.js below.

//store    
import { createStore } from 'vuex'

export default createStore({
  state: {
    isAuth: false,
  },
  mutations: {
    setAuth(state, payload) {
      state.isAuth = payload;
      
    }
  }
})


//main.js    
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

Upvotes: 1

Related Questions