首页 前端知识 Vuex modules的简单使用,Vue状态管理多模块实现

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

2024-08-24 23:08:22 前端知识 前端哥 607 189 我要收藏
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>
运行结果

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16791.html
标签
评论
发布的文章

jQuery File Upload 使用教程

2024-09-03 02:09:33

jQuery笔记

2024-05-03 18:05:51

jQuery-Spectragram 使用教程

2024-09-03 02:09:26

echarts问题汇总

2024-09-03 02:09:12

echarts自定义悬浮提示

2024-09-03 02:09:12

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!