如何在 Vuejs 应用程序中正确设置 Vuex？

Question

我正在创建一个 Vuejs 应用程序，并且我想使用 Vuex。

但是我无法添加 Vuex 商店。

这是我的代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userData: "USER!"
  },
  mutations: {

  },
  actions: {

  },
  getters: {

  }
})

export default store

我收到错误：

未捕获的语法错误：请求的模块'/node_modules/.vite/vue.js?v=52de2cee'不提供名为'default'的导出

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
const app = createApp(App)
import Vuex from 'vuex'
import { store } from '@/store/users'

app.use(router)
app.use(Vuex)

app.mount('#app')

我做错了什么？非常感谢。

Answer 1

您展示的第一块代码适用于 Vue 2，它在 Vue 3 中不起作用。而 Vue 3 需要 Vuex 4。

要在 Vue 3 应用程序中设置 Vuex 4：

1. 安装Vuex 4：

   npm i -S vuex@next
   

2. 更新商店以使用 Vuex 4

   createStore

   API（这将在下一步中为

   app.use()

   创建插件）：

   // @/store.js
   import { createStore } from 'vuex'
   
   export default createStore({
     state: {
       userData: "USER!"
     },
     mutations: {
   
     },
     actions: {
   
     },
     getters: {
   
     }
   })
   

3. 更新主脚本以使用

   app.use()

   安装商店：

   import { createApp } from 'vue'
   import store from '@/store'
   
   const app = createApp(App)
   app.use(store)
   

演示