在vue3中使用vuex 4.x

最新推荐文章于 2025-05-21 13:58:53 发布

HaooNAME

最新推荐文章于 2025-05-21 13:58:53 发布

阅读量1.5w

点赞数 8

CC 4.0 BY-SA版权

文章标签： vue vue.js es6 javascript

本文链接：https://blog.youkuaiyun.com/weixin_43564110/article/details/111566345

本文介绍了如何在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的新旧两种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近准备在项目中使用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