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>
运行结果