javascript - VueJs 使用 store 或 vuex 时出现空白页

问题描述

我有一个运行良好的 vuejs 应用程序，但是当我添加商店以在我的应用程序中使用 vuex 时，应用程序保持显示空白页面并且控制台没有任何错误但是当我检查源页面时我得到了


<!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: {
  }
})

应用程序.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>

我对此进行了研究，但找不到任何此类问题。我是 vue js 的初学者，我为此苦苦挣扎了好几天。提前致谢。

标签： javascriptvue.js

//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')

javascript - VueJs 使用 store 或 vuex 时出现空白页

问题描述

解决方案

推荐阅读