在vue3中使用vuex 4.x

最新推荐文章于 2025-09-06 15:46:38 发布

原创

最新推荐文章于 2025-09-06 15:46:38 发布 · 1.5w 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #es6 #javascript

本文介绍了如何在Vue3项目中升级并使用Vuex 4.x。首先，通过命令创建vue3脚手架，并在src目录下建立store结构，包括index.js入口文件和modules文件夹。接着，展示了在user.js中定义独立模块，getters根据业务需求定制。然后在index.js导入Vuex API及自定义模块。在Vite环境下需要注意某些导入方式。在main.js中引入Vuex并结合Element+使用。最后，讨论了在Composition API中使用Vuex的新旧两种方法。

最近准备在项目中使用vue3.0,顺便把vuex（目前是^4.0）也升级到最新版本了;

首先通过命令新建脚手架，在src目录下新建store文件夹。并创建index.js入口和modules文件夹（因为我把模块拆分了）
user.js文件，一个独立的模块

getters内容不多，根据自己的业务来
接下来在index.js里面导入vuex相关api和自己定义的模块，注意：vite下没法使用

// 这里跟vue2有点区别，vue2中是直接导入vue，然后通过vue.use(xxx)
import {
   
    createStore } from 'vuex'
import getters from './getters'

//因为我把模块拆分了，但是我又不想每次都导入，就通过这个自动导入modules目录下的模块
const modulesFiles = require.context('./modules', true, /\.js$/);
const modules = modulesFiles.keys

最低0.47元/天解锁文章