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

sbtkgmzw  于 2023-08-02  发布在  Java
关注(0)|答案(1)|浏览(89)

我正在创建一个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= 52 de 2cee '未提供名为'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')


我做错了什么?多谢了

pftdvrlh

pftdvrlh1#

您显示的第一个代码块是用于Vue 2的,它在Vue 3中无法工作。Vue 3需要Vuex 4。
要在Vue 3应用程序中设置Vuex 4:
1.安装Vuex 4:

npm i -S vuex@next

字符串
1.更新商店以使用Vuex 4 createStore API(这将在下一步中为app.use()创建一个插件):

// @/store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    userData: "USER!"
  },
  mutations: {

  },
  actions: {

  },
  getters: {

  }
})


1.更新主脚本以安装带有app.use()的商店:

import { createApp } from 'vue'
import store from '@/store'

const app = createApp(App)
app.use(store)


demo

相关问题