vuex模块化

demo

store/modules/user.js

• 可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

export default {
    namespaced: true, // 命名空間

    state: {
        userInfo: {
            name: 'hsz',
            token: 'hsz-token'
        }
    },

    getters: {
        gettersUserInfo(state) { // -> getters['user/gettersUserInfo']
            return (
                'name: ' + state.userInfo.name + ',token: ' + state.userInfo.token
            )
        }
    },

    mutations: { // -> mutations['user/updateName']
        updateName(state) {
            state.userInfo.name += '1'
        }
    },
  
    actions: {   
        updateNameAction(context) { // -> actions['user/updateNameAction']
            setTimeout(() => {
                context.commit('updateName')
            }, 500)
        }
    }
}

store/index.js

import { createStore } from 'vuex'
import user from './modules/user'

export default createStore({
    // 引入user模块
    modules: {
        user: user,
    }
})

views/About.vue

模块化且使用命名空间之后调用写法有所不同

<template>
    <div class="about">
        <!-- user模块 -->
        <div class="user">
            (state)->用户名：{{ this.$store.state.user.userInfo.name }}
        </div>
        <div class="">(mapState)->用户名：{{ userInfo.name }}</div>
        <div>(getters)->{{ this.$store.getters['user/gettersUserInfo'] }}</div>
        <div>(mapGetters)->{{ gettersUserInfo }}</div>
        <div>
            <button @click="this.$store.commit('user/updateName')">
                mutations修改用户名
            </button>
            <button @click="this.$store.dispatch('user/updateNameAction')">
                actions修改用户名
            </button>
        </div>
        <div>
            <button @click="updateName()">mapMutations修改用户名</button>
            <button @click="updateNameAction()">mapActions修改用户名</button>
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    components: {
    },
    computed: {
        ...mapState({ userInfo: state => state.user.userInfo }),
        ...mapGetters({ gettersUserInfo: 'user/gettersUserInfo' })
    },
    methods: {
        ...mapMutations({ updateName: 'user/updateName' }),
        ...mapActions({ updateNameAction: 'user/updateNameAction' })
    }
}
</script>

<style scoped>
.user {
    margin-top: 30px;
}
</style>

image.png

demo-gitee地址
官网