🤘 👨🏻‍🎓 👨🏽‍🏭 Vue.js和Vuex中的模块化 👏 🗳️ 🌇

在编写大型前端应用程序时，管理状态可能是一项艰巨而繁琐的任务。

对于Vue.js，开发了用于状态管理的Vuex插件。默认情况下，它具有以下文件夹结构：

Vuex存储中的文件夹结构

这种文件夹结构可以用在小型应用程序中，但是在大型应用程序中，源代码可能看起来不可读且丑陋，并且随着时间的推移，变得难以使用。

, . :

Vuex (. .: , , store/modules/user/mutations.js, .. )

, . , index.js, Vuex. , index.js , :

import Vue from "vue";
import Vuex from "vuex";
import state from './state.js'
import actions from './actions.js'
import mutations from './mutations.js'
import getters from './getters.js'
import user from './modules/user/index.js'
Vue.use(Vuex);
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
    modules: {
        user
    }
});

«user», index.js, Vuex. , «user» , .

«user» state, actions, getters mutations modules/user/index.js :

import state from './state.js'
import mutations from './mutations.js'
import actions from './actions.js'
import getters from './getters.js'
export default {
    namespaced: true,
    state,
    mutations,
    getters,
    actions,
}

, namespaced true. , , , . ...

- Vuex , Vuex, . , userAvatar «user» userAvatar (. .: mapState: ...mapState(['userAvatar'])}). mapState (. .: ) :

import {mapState} from 'vuex'
export default {
    computed: {
        ...mapState({
            userAvatar: state => state.user.userAvatar
        })
    },
}

, :

export default {
    userAvatar: "img-location"
};

, «user» . , , :

import {mapActions} from 'vuex'
export default {
    methods: {
        ...mapActions("user", ["getUserInfo"]),
        userInfo() {
            this.getUserInfo()
            //       –     (. .: ,     <..mapActions("user", ["getUserInfo"]),>),       , 
            //   
            this.$store.dispatch('user/getUserInfo')
            //          –   getUserInfo
        }
    },
}

Vuex :

export default {
    getUserInfo() {
        alert('Successful')
    }
}

. .

export default {
    methods: {
        setuserInfo() {
            let data = {
                name: 'Henry'
            }
            this.$store.commit('user/setUserInfo', data)
        }
    },
}

Vuex :

export default {
    setUserInfo: (state, data) => {
        state.user = data
    }
}

. . – , :

export default {
    getActiveUsers: state => {
        return state.users.filter(x => x.active === true)
    }
}

上面是声明或编写getter的推荐方法，但是可以通过将getter映射到计算属性对象的字段来访问它，如下所示：

import {mapState} from 'vuex'
export default {
    computed: {
        ...mapGetters('user', ['getActiveUsers'])
    },
}

这是一段漫长的旅程，希望您已经成功使用模块化Vuex并编写了更简洁的代码。

Vue.js和Vuex中的模块化

More articles: