Vuex modules的简单使用，Vue状态管理多模块实现

Posted 2023-03-03 未来先生v

Vuex modules的简单使用，Vue状态管理多模块实现

前言

阅读前提

参考Module | Vuex (vuejs.org)

1、了解Vue。

2、了解Vuex的作用和State、Getter、Mutation、Action的用法。

目的

工作中使用Vue状态管理（Vuex）是必不可少。

在项目中，如果只有一个文件去维护整个项目的状态，不利于查找和管理。因此在项目中我们就需要按照功能模块去划分，使用modules。

引入Vuex

安装Vuex

 npm install --save vuex

配置

创建store目录，创建index.js文件。

import  createStore  from 'vuex'
export default createStore(
    state: 
        user: 
            name: '李四',
            age: -1,
        ,
        school: "清华大学"        
    ,
     getters: 
        getAge(state) 
            return state.user.age > 0 ? state.user.age : "年龄小于0，不符合要求！"
        
       
)

主文件main.js中引入Vuex

import  createApp  from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

项目结构

模块划分

前面我们已经把状态管理信息都放到了store/index.js文件中，接下来我们对index进行模块划分。

项目结构

创建模块

创建目录modules

创建文件moduleA.js

export default 
    namespaced: true,
    state: 
        user: 
            name: '李四',
            age: -1,
        
    ,
    getters: 
        getAge(state) 
            return state.user.age > 0 ? state.user.age : "年龄小于0，不符合要求！"
        
    

创建文件moduleB.js

export default 
    namespaced: true,
    state: 
        school: "清华大学"
    

把模块引入store/index.js

import  createStore  from 'vuex'
import moduleA from "@/store/modules/moduleA";
import moduleB from "@/store/modules/moduleB";

//动态引入
// 读取模块化文件
// const files = require.context('./modules', false, /\\.js$/)
// const modules = ;
// files.keys().forEach(key => 
//     const name = key.replace(/(\\.\\/|\\.js)/g, '')
//     modules[name] = files(key).default || files(key)
// )

export default createStore(
    modules: 
        moduleA,
        moduleB
    ,
    state: ,
    getters: 
)

创建测试组件demo

<template>
  <div>
    <p>
       user.name 年龄：
       user.age ,
       getAge 
      <br>
      moduleB的值： school 
    </p>
  </div>
</template>

<script>
import mapState, mapGetters from 'vuex';

export default 
  name: 'DemoTest',
  data() 
    return 
  ,

  computed: 
    ...mapState('moduleA', ['user']),
    ...mapState('moduleB', ['school']),
    ...mapGetters('moduleA', ["getAge"])
  

</script>

<style scoped>

</style>

运行结果