Vuex模塊化編碼使用詳解

更新時間：2025年10月22日 09:25:33 作者：yume_sibai

本文介紹了 Vuex 的模塊化和命名空間功能,通過對 store.js 進行模塊劃分,提高代碼維護性和數(shù)據(jù)分類的明確性,并講解了在組件中讀取和操作模塊化 state、getters、actions、mutations 的具體方法

一、模塊化+命名空間

1.目的：讓代碼更好維護，讓多種數(shù)據(jù)分類更加明確。

2.修改store.js

        const countAbout = {
                namespaced:true,//開啟命名空間
                state:{x:1},
                mutations: { ... },
                actions: { ... },
                getters: {
                        bigSum(state){
                                return state.sum * 10
                        }
                }
        }
        const personAbout = {
                namespaced:true,//開啟命名空間
                state:{ ... },
                mutations: { ... },
                actions: { ... }
        }
        const store = new Vuex.Store({
                modules: {
                        countAbout,
                        personAbout
                }
         })

3.開啟命名空間后，組件中讀取state數(shù)據(jù)：

        //方式一：自己直接讀取
        this.$store.state.personAbout.list
        //方式二：借助mapState讀取
        ...mapState('countAbout',['sum','school','subject']),

4.開啟命名空間后，組件中讀取getters數(shù)據(jù)：

        //方式一：自己直接讀取
        this.$store.getters['personAbout/firstPersonName']
        //方式二：借助mapGetters讀取
        ...mapGetters('countAbout',['bigSum'])

5.開啟命名空間后，組件中調(diào)用dispatch

        //方式一：自己直接dispatch
        this.$store.dispatch('personAbout/addPersonWang',person)
        //方式二：借助mapActions：
        ...mapActions('countAbout',{incrementOdd:'incrementOdd',incrementWait:'incrementWait'})

6.開啟命名空間后，組件中調(diào)用commit

        //方式一：自己直接commit
        this.$store.commit('personAbout/PERSON_ADD',person)
        //方式二：借助mapMutations：
        ...mapMutations('countAbout',{increment:'INCREMENT',decrement:'DECREMENT'}),

二、代碼實現(xiàn)

將求和相關(guān)配置寫入countAbout.js中。

export default {
    namespaced:true,
    actions:{
        incrementOdd(context,value){
            if(context.state.sum % 2)
                context.commit('INCREMENTODD',value)
        },
        incrementWait(context,value){
            setTimeout(() => {
                context.commit('INCREMENTWAIT',value)
            }, 500);
        }
    },
    mutations:{
        INCREMENT(state,value){
            state.sum +=value
        },
        DECREMENT(state,value){
            state.sum -=value
        },
        INCREMENTODD(state,value){
            state.sum +=value
        },
        INCREMENTWAIT(state,value){
            state.sum +=value
        },
    },
    state:{
        sum:0,
        school:'清華大學(xué)',
        subject:'Vue',
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}

將求和相關(guān)配置寫入personAbout.js中。

import axios from 'axios'
import { nanoid } from 'nanoid'

export default {
    namespaced:true,
    actions:{
        personAddWang(context,value){
            if(value.name.indexOf('王') === 0){
                context.commit('PERSON_ADD',value)
            }
            else{
                alert('請?zhí)砑有胀醯娜?)
            }
        },
        personAddServer(context){
            axios.get('https://www.openapijs.com/api/random').then(
                Response=>{
                    context.commit('PERSON_ADD',{id:nanoid(),name:Response.data.data.poems.autho})
                },
                Error=>{
                    alert(Error.message)
                }
            )
        }
    },
    mutations:{
        PERSON_ADD(state,value){
            state.personList.unshift(value)
        }
    },
    state:{
        personList:[{
            id:'001',
            name:'張三'
        }]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }
    }
}

將countAbout和personAbout引入index.js中。

//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countAbout from './countAbout'
import personAbout from './personAbout'

//應(yīng)用Vuex插件
Vue.use(Vuex)


//創(chuàng)建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout,
        personAbout
    }
})

模塊化后，在vue文件中不同的引用方法，在Count.js中使用map引用：

<template>
    <div class="main">
        <h1>這門課是{{ school }}的{{ subject }}課程</h1>
        <h2>當前求和為：{{ sum }}</h2>
        <h3>當前求和放大十倍為：{{ bigSum }}</h3>
        <h3 style="color: red;">當前人數(shù)為：{{ personList.length }}</h3>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="INCREMENT(n)">+</button>
        <button @click="DECREMENT(n)">-</button>
        <button @click="incrementOdd(n)">當前為奇數(shù)再加</button>
        <button @click="incrementWait(n)">等會再加</button>
    </div>
</template>

<script>
    import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

    export default {
        name:'Count',
        data() {
			return {
                n:1
			}
		},
        methods: {
            ...mapMutations('countAbout',['INCREMENT','DECREMENT']),
            ...mapActions('countAbout',['incrementOdd','incrementWait']),
            
        },
        computed:{
            ...mapState('countAbout',['sum','school','subject']),
            ...mapState('personAbout',['personList']),
            ...mapGetters('countAbout',['bigSum'])

        }
    }
</script>

<style lang="less" scoped>
    button{
        margin-left: 5px;
    }
</style>

在Person.js中使用手動引用：

<template>
  <div>
    <h2>人員列表</h2>
    <h3 style="color: red;">Count組件的總和為:{{ sum }}</h3>
    <h3>列表第一個人名為：{{ firstPersonName }}</h3>
    <input type="text" v-model="person">
    <button @click="personAdd">點擊添加</button>
    <button @click="personAddWang">添加一個姓王的人</button>
    <button @click="personAddServer">隨機添加一個人</button>
    <ul>
        <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
    import { nanoid } from 'nanoid'
    
    export default {
        name:'Persons',
        data() {
            return {
                person:''
            }
        },
        methods: {
            personAdd(){
                const obj = {id:nanoid(),name:this.person}
                this.$store.commit('personAbout/PERSON_ADD',obj)
                this.person=''
            },
            personAddWang(){
                const obj = {id:nanoid(),name:this.person}
                this.$store.dispatch('personAbout/personAddWang',obj)
                this.person=''
            },
            personAddServer(){
                this.$store.dispatch('personAbout/personAddServer')
            }
        },
        computed:{
            personList(){
                return this.$store.state.personAbout.personList
            },
            sum(){
                return this.$store.state.countAbout.sum
            },
            firstPersonName(){
                return this.$store.getters['personAbout/firstPersonName']
            }
        }
    }
</script>

<style lang="less">
    ul{
        font-size: 18px;
        li{
            padding-top: 5px;
        }
    }
</style>