上图是vuex的结构图vuex即 store, 包含State,Action,Mutations, 每一个vue项目都需要使用vuex做组件之间的数据共享
使用场景:
数据最终存放在store的State中, 但是也会面临问题, 比如,login.vue和dept.vue这俩组件都需要使用store在不同的组件之间进行数据的共享, 很明显,将login.vue中得到的用户信息和后续得到的dept信息都放在一个Store.State中时,就会显得很臃肿,这时可以考虑将store模块化了
模块化后的 store 大概长这样,如果画的不对,欢迎留言
这样经过模块化的vuex,每个模块维护着不同组件的数据,清晰直观
编码实现#
创建store文件夹, 创建index.js 作为vuex的入口js
import Vue from 'vue' import Vuex from 'vuex' import app from './modules/app' import user from './modules/user' import getters from './getters' import dept from "./modules/dept"; Vue.use(Vuex) const store = new Vuex.Store({ modules: { app, user, dept }, getters }) export default store
如上图中,将vuex划分成三个模块,每一个模块都拥有自己的action, mutation, state组件
创建vuex的子模块, user.js , 编码如下: 注意点就是要开启命令空间模式,
namespaced=true , 因为现在的store被划分成了多模块,每一个模块都有自己的state,所有在mapXXX使用时,需要指定使用的是哪个模块下的state
const user = { namespaced: true, state: { // 用户的属性 }, mutations: { // todo AddInfo(state,data){ // todo with state } }, actions: { addInfo({commit},data){ commit('AddInfo',data) } // todo } } export default user
多模块vuex的使用:#
如图,如果不划分模块,我们有两种方法,可以这样,$store.state.属性 或者 $store.getters取出state中的值使用,划分模块后,推荐使用通过名称空间映射的方式映射出不同模块的State再使用
所以需要再创建getters.js
const getters = { userId: state => state.user.userId } export default getters
- 取值
import store from './store' let userId = store.getters.userId
- 映射action
指定 模块,映射出方法
import {mapActions} from "vuex"; ...mapActions('user', [ 'addInfo', ]),
![[vue]多组件共享数据与vuex模块化](https://ucc.alicdn.com/pic/developer-ecology/dc57vfg7hskbk_ab1b021f2f4a41a5bd706233975704ab.png?x-oss-process=image/resize,h_160,m_lfit)