Vue3.0 setup 里使用 vuex

最新推荐文章于 2024-09-14 12:05:47 发布

宽粉儿~

最新推荐文章于 2024-09-14 12:05:47 发布

阅读量1.3k

点赞数 1

分类专栏： vue3.0 文章标签： vue.js

本文链接：https://blog.csdn.net/ah_ching/article/details/116535314

版权

vue3.0 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue3.0的setup语法糖中集成和使用Vuex进行状态管理。通过创建store目录结构，自动导入modules，并在组件内部利用`useStore`获取store实例，实现组件对全局状态的访问。示例展示了如何在组件内通过`computed`获取并打印getters。

摘要由CSDN通过智能技术生成

Vue3.0 setup 里使用 vuex

在这里插入图片描述
在store中创建如图所示目录结构

user.js

Alt

index.js

import { createApp } from '@vue/runtime-dom'
import { createStore } from 'vuex'
const modulesFiles = require.context('./modules', true, /.js$/)
//自动导入modules目录下的模块
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
    const value = modulesFiles(modulePath)
    modules[moduleName] = value.default
    return modules
}, {})

export default createStore({
    modules
})

组件上使用：

import { computed } from "vue";
import { useStore } from "vuex";
export default {
setup() {
    const store = useStore(); //获取store实例
    const user = computed(() => store.getters);
    console.log(user);
    return { user};
  }
}