Laravel + Vue 3项目中Vuex的store正确引入至app.js的解决方案

你的问题出在两个核心点：store.js的写法错误，以及app.js未正确注入store实例。以下是具体修正步骤：

1. 修正store.js代码 #

原store.js中错误地自行创建并挂载了Vue实例，且未导出store对象，导致app.js无法正确导入。修改为仅创建并导出Vuex store：

import { createStore } from 'vuex'

// 只负责创建Vuex store并导出，不要在此处创建Vue实例
export default createStore({
  state: {
    counter: 1000
  },
  // 后续可按需添加actions、mutations、getters等模块
})

2. 修正app.js代码 #

确保导入store后，通过.use(store)将其注入到Vue实例中，同时补全mainapp组件的导入（原代码未导入该组件会引发报错）：

import { createApp } from 'vue'
import ViewUIPlus from 'view-ui-plus'
import 'view-ui-plus/dist/styles/viewuiplus.css'
import common from './common'
import store from './store'
import router from './router' // 确保router已正确导入
import mainapp from './components/mainapp.vue' // 导入mainapp组件

createApp({
  components: {
    mainapp
  }
})
.use(router)
.use(ViewUIPlus)
.use(store) // 注入Vuex store实例
.mixin(common)
.mount('#app');

关键说明 #

• store.js的核心作用是生成并导出Vuex store实例，不要在其中创建或挂载Vue应用，否则会与app.js的实例冲突。
• 必须在Vue实例上调用.use(store)，才能让所有组件共享访问Vuex的状态数据。

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