Vue项目引入Vuex的store后出现空白页且控制台无报错求助

问题根因 #

你当前项目采用Vue 2.x的语法开发，但安装的Vuex为仅兼容Vue 3的4.x版本，API不匹配导致应用无法正常挂载，所以出现空白页且无报错的情况。

解决步骤 #

• 第一步：卸载当前版本的Vuex

  npm uninstall vuex
  # 用yarn的话执行 yarn remove vuex
  

• 第二步：安装适配Vue 2的3.x版本Vuex

  npm install vuex@3
  # 用yarn的话执行 yarn add vuex@3
  

• 第三步：修改/store/index.js的代码，替换为Vuex 3的语法：

  import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  export default new Vuex.Store({
    state: {
      user: {
        id: '',
        email: '',
        username: '' // 提前声明username属性，避免Vue2响应式丢失问题
      },
      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: {}
  })
  

• 第四步：删除main.js中多余的Vue 3语法代码，也就是这一行：

  import { createApp } from 'vue'
  

• 第五步：重启项目即可正常运行。

额外优化提示 #

你原有代码中state.user初始没有定义username属性，Vue 2无法监听后续新增的对象属性，提前在state中声明可以避免后续出现数据不更新的问题。

内容的提问来源于stack exchange，提问作者ashimos