👩‍🔧 👨🏾‍🤝‍👨🏽 🛸 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を宣言または作成するための推奨される方法ですが、次のようにゲッターを計算されたプロパティオブジェクトのフィールドにマッピングすることでアクセスできます。

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

長い道のりでした。うまくいけば、モジュラーVuexを使用して、よりクリーンなコードを書くことができました。

Vue.jsおよびVuexのモジュール性

More articles: