摘要：原文出自本人博客的詳細(xì)總結(jié)博主博客兼乎說在前面最近在使用做項(xiàng)目，所以有了總結(jié)的念頭。在這種情況下，只有當(dāng)所有觸發(fā)函數(shù)完成后，返回的才會(huì)執(zhí)行。當(dāng)模塊被注冊(cè)后，它的所有及都會(huì)自動(dòng)根據(jù)模塊注冊(cè)的路徑調(diào)整命名。

原文出自本人博客：
vuex的詳細(xì)總結(jié)
博主博客--兼乎

最近在使用vuex做項(xiàng)目，所以有了總結(jié)vuex的念頭。于是在本天中午到晚上9點(diǎn)，我一直沒有停過，為了能盡快將vuex的重點(diǎn)寫出來。雖然本vuex文檔還不夠完整但暫時(shí)夠用，最大缺點(diǎn)是沒有寫實(shí)戰(zhàn)，只是總結(jié)了每個(gè)知識(shí)的的要點(diǎn)?；叵胍幌拢瑫r(shí)間過得很多，new Boy() 之后時(shí)間更加緊迫，有時(shí)候分心乏術(shù)。到現(xiàn)在，使用vue也有一段時(shí)間了。老是想總結(jié)點(diǎn)有關(guān)vue的卻老是在寫一些vue相關(guān)的demo，從而沒有了總結(jié)的時(shí)間。今天總結(jié)下定決定寫點(diǎn)vue相關(guān)的，一方面鞏固基數(shù)，一方面分享總結(jié)，同時(shí)本編偏理論和一些細(xì)節(jié)，后面一部分因?yàn)楣俜轿臋n也挺實(shí)用的就直接摘抄Vuex官方文檔。

另外貼上一段戳心的雞湯，請(qǐng)喝：
我們的敵人不是我們身外的黑暗，而是自己內(nèi)心的黑暗，那就是我們的容易失望，我們的沮喪，我們的缺乏信心，耐心和細(xì)心，我們?nèi)狈?jiān)韌，輕言放棄，乃至自暴自棄。

不懂的要上官網(wǎng)看文檔，不懂的看一次兩次直到弄懂為止。

vue是一個(gè)前端javascript寫的漸進(jìn)式框架，在組件化模塊的時(shí)候主要無非是渲染數(shù)據(jù)、增強(qiáng)交互效果、拓展業(yè)務(wù)邏輯組件、組件分離要高內(nèi)聚低耦合、分配管理路由，在這之后就是一個(gè)掛在在瀏覽器端的全局js模塊。當(dāng)然這是我的片面之詞，詳情請(qǐng)移步vue。

可以這么通俗理解：vuex是一個(gè)掛載到vue的全局變量對(duì)象（store），而且store的 屬性（state） 的 改變 只 能通過提交mutation來改變，使用Getter來映射store對(duì)象狀態(tài)。另外 提交 同步事務(wù) 使用 mutation 的 commit， 分發(fā) 異步事務(wù) 使用 action 的 dispatch。同時(shí)使用 module 來方便管理 vuex模塊 和 狀態(tài)

Vuex官方文檔:https://vuex.vuejs.org/zh-cn/intro.html

前方高能

狀態(tài)管理模式，核心是一個(gè)store（倉(cāng)庫(kù)），包含 共享的 單一狀態(tài)（state）樹

1、一個(gè) 全局單例 模式管理，方便集中管理所有組件狀態(tài)
2、狀態(tài)管理 是 響應(yīng)式 的，且高效
3、改變狀態(tài)（state）的 唯一途徑 是 顯示提交commit（mutation）
4、mutation->動(dòng)作

1、因?yàn)闋顟B(tài)儲(chǔ)存是響應(yīng)式，所以 讀取狀態(tài)的方法 最簡(jiǎn)單的方法是使用 計(jì)算屬性（computed），但建議使用輔助函數(shù)獲取狀態(tài)

2、Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態(tài)。
（
    同步情況：Action -> 提交 mutation  ；  Mutation -> 提交 commit
    異步情況：Action -> 使用dispatch出發(fā)異步
）
Action 可以包含任意異步操作，而mutation 是同步事務(wù)。
（Action -> 異步  ；  Mutation -> 同步）

3、使用action分發(fā)異步事務(wù)時(shí)：

一個(gè)?store.dispatch?在不同模塊中可以觸發(fā)多個(gè) action 函數(shù)。
在這種情況下，只有當(dāng)所有觸發(fā)函數(shù)完成后，返回的 Promise 才會(huì)執(zhí)行。

使用輔助函數(shù)：
獲取狀態(tài)：mapState

當(dāng)映射的計(jì)算屬性的名稱與 state 的子節(jié)點(diǎn)名稱相同時(shí)，使用數(shù)組傳入

如：mapState（[
        "count"
    ]）
不然 傳 對(duì)象
如：mapState({
        count: state => state.count,
        countAlias: "count"   //這里 "count" 等價(jià)于上述 state => state.count
    })

對(duì)象展開運(yùn)算符（…）:

使用對(duì)象展開運(yùn)算符將此對(duì)象 混入 到 外部對(duì)象 中
…mapState（{   }）

接受參數(shù)

參數(shù)可以有state和getter本身

如：const store = new Vuex.store({
        state: {
            todos: [
                {id: 1, text: "id1", done: true},
                {id: 2, text: "id2", done: false}
            ]
        },
        getters: {
            doneTodos: state => {
                //這里過來state中todos的done為true的對(duì)象，并暴露為store.getters對(duì)象
                //store.getters.doneTodos // -> [{ id: 1, text: "...", done: true }]
                return state.todos.filter( todo => todo.done)
            },
            todoCount: (state, getter) => {
                return getters.doneTodos.length  // -> 1
            }
        }
    })

使用輔助函數(shù)：

僅僅是將 store 中的 getter  映射 到 局部 計(jì)算屬性：mapGetters
例子：看上文

對(duì)象展開運(yùn)算符（…）:

使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中

如：computed: {
        ...mapGetters([
          "doneTodosCount",
          "anotherGetter",
          // ...
        ])
      }
    

                        類似于事件（Event）：每個(gè) mutation 都有一個(gè) 字符串 的 事件類型 (type) 
                        和 一個(gè) 回調(diào)函數(shù) (handler,改變狀態(tài)的地方)

接受參數(shù)

參數(shù)可以有多個(gè)。第一參數(shù)為state，
                及其他對(duì)象或?qū)傩裕ㄖС痔峤回?fù)荷Payload）

如：const store = new Vuex.Store({
      state: {
        count: 1
      },
      mutations: {
        increment (state, n) {
          state.count += n
        }
      }
    })
觸發(fā)事件：提交一次commit
store.commit("increment", 10)

在組件中提交 Mutation

兩種方法：
    1.使用 this.$store.commit("xxx") （支持載荷PayLoad）
    2.使用 mapMutations 輔助函數(shù) （支持載荷PayLoad）
        將組件中的 methods 映射為 store.commit 調(diào)用（需要在根節(jié)點(diǎn)注入 store）

        如：
        // xxx.vue組件
        import { mapMutations } from "vuex"
        export default {
          // ...
          methods: {
            ...mapMutations([
              "increment", 
            // 將 `this.increment()` 映射為 `this.$store.commit("increment")`
              "incrementBy" 
            // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit("incrementBy", amount)`
            ]),
            ...mapMutations({
              add: "increment" 
            // 將 `this.add()` 映射為 `this.$store.commit("increment")`
            })
          }
        }
        

Mutation 需遵守 Vue 的響應(yīng)規(guī)則

使用 常量 替代 Mutation 事件類型( 推薦 )

這是一種規(guī)范，而且這樣既能使用 eslint 的檢測(cè)工具，也能讓開發(fā)者一目了然

如：
//mutation-types.js
export default {
    const SOME_MUTATION = " SOME_MUTATION "
}

//store.js
import Vuex from "vuex"
import * as types from "mutation-types"

const store = Vuex.store({
    state: { … },
    mutations: {
        [ SOME_MUTATION ]( state ) => {
            …
        }
    }
})

Mutation 必須是同步函數(shù)（ 重點(diǎn) ）

為了實(shí)現(xiàn)state實(shí)時(shí)跟蹤，使用同步函數(shù)，也為了調(diào)試方便

                         而且 是 提交 mutation 上的事件

接受參數(shù)

參數(shù)可以有多個(gè)。第一參數(shù)為接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對(duì)象（因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getter），
                及其他對(duì)象或?qū)傩裕ㄖС痔峤回?fù)荷Payload）

如：
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state, n) {
      state.count += n
    }
  },
  actions: {
    incrementAsyn(context, n) {
        context.commit( "increment", n )
    }
  }
//或者使用參數(shù)結(jié)構(gòu)
//actions: {
//  increment( { commit } ) {
//     commit( "increment", n )
//   }
  //  }

})

分發(fā)Action

因?yàn)锳ction提交的commit實(shí)際是提交mutation，而mutation的提交必須是同步的，
要向提交異步的action必須使用dispatch

如：
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state, amount) {
      state.count += amount
    }
  },
  actions: {
    incrementAsyn( { commit } ) {
        setTimeout( () => {
            commit( "increment" )
        }, 1000)
    }
   }
});

// 以載荷形式分發(fā)
store.dispatch( "incrementAsyn", {
    amount: 10
} )

// 以對(duì)象形式分發(fā)
store.dispatch( {
    type: "incrementAsyn", 
    amount: 10
} )

例子2：
來看一個(gè)更加實(shí)際的購(gòu)物車示例，涉及到調(diào)用異步 API 和分發(fā)多重 mutation：

actions: {
  checkout ({ commit, state }, products) {
    // 把當(dāng)前購(gòu)物車的物品備份起來
    const savedCartItems = [...state.cart.added]
    // 發(fā)出結(jié)賬請(qǐng)求，然后樂觀地清空購(gòu)物車
    commit(types.CHECKOUT_REQUEST)
    // 購(gòu)物 API 接受一個(gè)成功回調(diào)和一個(gè)失敗回調(diào)
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失敗操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

在組件中 分發(fā) Action
兩種方法：
1.使用 this.$store.dispatch("xxx") （支持載荷PayLoad）
2.使用 mapActions 輔助函數(shù) （支持載荷PayLoad）

將組件中的 methods 映射為 store.commit 調(diào)用（需要在根節(jié)點(diǎn)注入 store）

如：
// xxx.vue組件
import { mapActions } from "vuex"
export default {
  // ...
  methods: {
   ...mapActions([
      "increment", 
    // 將 `this.increment()` 映射為 `this.$store.dispatch("increment")`
      "incrementBy" 
    // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch("incrementBy", amount)`
    ]),
    ...mapActions({
      add: "increment" 
    // 將 `this.add()` 映射為 `this.$store.dispatch("increment")`
    })
  }
}

組合Action

那么既然使用actions來 異步 分發(fā)改變狀態(tài)，
因此也要使用到 Promise ，
和 asyn/await 的新知識(shí)的

使用 Promise
actions: {
    actionA( {commit} ){
        return new Promise( (resolve, reject) => {
            setTimeout( () => {
                commit("someMutation")
                resolve()
            }, 1000)
        })
    },
    actionB( {dispatch, commit} ){
        return dispatch("actionA).then( () => {
            commit("someOtherMutation")
        })
    }
},
// xxx.vue組件
methods： {
this.$store.dispatch("actionA").then(() => {
    …
})
}


使用  asyn/await 
//假設(shè) getData() 和 getOtherData() 返回的是 Promise

actions: {
    async actionA ( {commit} ) {
        commit("gotData", await getData())
    },
    async actionB ( {commit} ) {
        await dispatch("actionA") 
        //等待actionA完成
        commit("gotOtherData", await getOtherData())
    }
}

注意：
一個(gè)?store.dispatch?在不同模塊中可以觸發(fā)多個(gè) action 函數(shù)。
在這種情況下，只有當(dāng)所有觸發(fā)函數(shù)完成后，返回的 Promise 才會(huì)執(zhí)行。

由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

模塊的局部狀態(tài)
    對(duì)于模塊內(nèi)部的 mutation 和 getter，接收的第一個(gè)參數(shù)是模塊的局部狀態(tài)對(duì)象。

    如：
    const moduleA = {
      state: { count: 0 },
      mutations: {
        increment (state) {
          // 這里的 `state` 對(duì)象是模塊的局部狀態(tài)
          state.count++
        }
      },
      getters: {
        doubleCount (state) {
          return state.count * 2
        }
      }
    }
    
    同樣，對(duì)于模塊內(nèi)部的 action，局部狀態(tài)通過 context.state 暴露出來，
    根節(jié)點(diǎn)狀態(tài)則為 context.rootState：
    如：
    const moduleA = {
      // ...
      actions: {
        incrementIfOddOnRootSum ({ state, commit, rootState }) {
          if ((state.count + rootState.count) % 2 === 1) {
            commit("increment")
          }
        }
      }
    }
    對(duì)于模塊內(nèi)部的 getter，根節(jié)點(diǎn)狀態(tài)會(huì)作為第三個(gè)參數(shù)暴露出來：
    如:
    const moduleA = {
      // ...
      getters: {
        sumWithRootCount (state, getters, rootState) {
          return state.count + rootState.count
        }
      }
    }
    
命名空間
    默認(rèn)情況下，module中的{ state， actions, getters } 注冊(cè) 在 全局變量上， 
    使得多個(gè)模塊能夠?qū)ν?mutation 或 action 作出響應(yīng)。
    
    如果希望 模塊具有更高的封裝度和復(fù)用性，可以通過 添加  namespaced: true  的方式使其成為命名空間模塊。
    當(dāng)模塊被注冊(cè)后，它的所有 getter、action 及 mutation 都會(huì)自動(dòng)根據(jù)模塊注冊(cè)的路徑調(diào)整命名。例如：

    如：
    const store = new Vuex.Store({
      modules: {
        account: {
          namespaced: true,
    
          // 模塊內(nèi)容（module assets）
          state: { ... }, // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的了，使用 `namespaced` 屬性不會(huì)對(duì)其產(chǎn)生影響
          getters: {
            isAdmin () { ... } // -> getters["account/isAdmin"]
          },
          actions: {
            login () { ... } // -> dispatch("account/login")
          },
          mutations: {
            login () { ... } // -> commit("account/login")
          },
          // 嵌套模塊
          modules: {
            // 繼承父模塊的命名空間
            myPage: {
              state: { ... },
              getters: {
                profile () { ... } // -> getters["account/profile"]
              }
            },
            // 進(jìn)一步嵌套命名空間
            posts: {
              namespaced: true,
              state: { ... },
              getters: {
                popular () { ... } // -> getters["account/posts/popular"]
              }
            }
          }
        }
      }
    })
    啟用了命名空間的 getter 和 action 會(huì)收到局部化的 getter，dispatch 和 commit。換言之，你在使用模塊內(nèi)容（module assets）時(shí)不需要在同一模塊內(nèi)額外添加空間名前綴。更改 namespaced 屬性后不需要修改模塊內(nèi)的代碼。
    
在命名空間模塊內(nèi)訪問全局內(nèi)容（Global Assets）
    如果希望 使用全局  state  和 getter，rootState 和 rootGetter 會(huì)作為第三和第四參數(shù)傳入 getter，也會(huì)通過 context 對(duì)象的屬性傳入 action。

    {
        命名模塊（module）內(nèi) 使用 全局 state 和 getter
        在命名模塊（module）的getterr 傳入 rootState 和 rootGetter
    }
    若需要在全局命名空間內(nèi)分發(fā) action 或提交 mutation，將 { root: true } 作為第三參數(shù)傳給 dispatch 或 commit 即可。
    {
        全局命名空間 內(nèi) 分發(fā) action 或 提交 mutation
        則在 action 或 mutation 內(nèi)
          dispatch("someOtherAction", null, { root: true }) // -> "someOtherAction"
          dispatch("someOtherAction", null, { root: true }) // -> "someOtherAction"
    }

    如：
    modules: {
      foo: {
        namespaced: true,
    
        getters: {
          // 在這個(gè)模塊的 getter 中，`getters` 被局部化了
          // 你可以使用 getter 的第四個(gè)參數(shù)來調(diào)用 `rootGetters`
          someGetter (state, getters, rootState, rootGetters) {
            getters.someOtherGetter // -> "foo/someOtherGetter"
            rootGetters.someOtherGetter // -> "someOtherGetter"
          },
          someOtherGetter: state => { ... }
        },
    
        actions: {
          // 在這個(gè)模塊中， dispatch 和 commit 也被局部化了
          // 他們可以接受 `root` 屬性以訪問根 dispatch 或 commit
          someAction ({ dispatch, commit, getters, rootGetters }) {
            getters.someGetter // -> "foo/someGetter"
            rootGetters.someGetter // -> "someGetter"
    
            dispatch("someOtherAction") // -> "foo/someOtherAction"
            dispatch("someOtherAction", null, { root: true }) // -> "someOtherAction"
    
            commit("someMutation") // -> "foo/someMutation"
            commit("someMutation", null, { root: true }) // -> "someMutation"
          },
          someOtherAction (ctx, payload) { ... }
        }
      }
    }

帶命名空間的綁定函數(shù)

當(dāng)使用 mapState, mapGetters, mapActions 和 mapMutations 這些函數(shù)來綁定命名空間模塊時(shí)，寫起來可能比較繁瑣：
如：
computed: {
  ...mapState({
    a: state => state.some.nested.module.a,
    b: state => state.some.nested.module.b
  })
},
methods: {
  ...mapActions([
    "some/nested/module/foo",
    "some/nested/module/bar"
  ])
}
解決方法：
1、對(duì)于這種情況，可以將模塊的空間名稱字符串作為第一個(gè)參數(shù)傳遞給上述函數(shù)，這樣所有綁定都會(huì)自動(dòng)將該模塊作為上下文。于是上面的例子可以簡(jiǎn)化為：

computed: {
  ...mapState("some/nested/module", {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions("some/nested/module", [
    "foo",
    "bar"
  ])
}
2、通過使用 createNamespacedHelpers 創(chuàng)建基于某個(gè)命名空間輔助函數(shù)。它返回一個(gè)對(duì)象，對(duì)象里有新的綁定在給定命名空間值上的組件綁定輔助函數(shù)：

import { createNamespacedHelpers } from "vuex"

const { mapState, mapActions } = createNamespacedHelpers("some/nested/module")

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      "foo",
      "bar"
    ])
  }
}

給插件開發(fā)者的注意事項(xiàng)

如果開發(fā)的插件（Plugin）提供了模塊并允許用戶將其添加到 Vuex store，可能需要考慮模塊的空間名稱問題。對(duì)于這種情況，你可以通過插件的參數(shù)對(duì)象來允許用戶指定空間名稱：

如：
// 通過插件的參數(shù)對(duì)象得到空間名稱
// 然后返回 Vuex 插件函數(shù)
export function createPlugin (options = {}) {
  return function (store) {
    // 把空間名字添加到插件模塊的類型（type）中去
    const namespace = options.namespace || ""
    store.dispatch(namespace + "pluginAction")
  }
}

模塊動(dòng)態(tài)注冊(cè)

在 store 創(chuàng)建之后，你可以使用 store.registerModule 方法注冊(cè)模塊：

如：
// 注冊(cè)模塊 `myModule`
store.registerModule("myModule", {
  // ...
})
// 注冊(cè)嵌套模塊 `nested/myModule`
store.registerModule(["nested", "myModule"], {
  // ...
})
之后就可以通過 store.state.myModule 和 store.state.nested.myModule 訪問模塊的狀態(tài)。

模塊動(dòng)態(tài)注冊(cè)功能使得其他 Vue 插件可以通過在 store 中附加新模塊的方式來使用 Vuex 管理狀態(tài)。例如，vuex-router-sync 插件就是通過動(dòng)態(tài)注冊(cè)模塊將 vue-router 和 vuex 結(jié)合在一起，實(shí)現(xiàn)應(yīng)用的路由狀態(tài)管理。

你也可以使用 store.unregisterModule(moduleName) 來動(dòng)態(tài)卸載模塊。注意，你不能使用此方法卸載靜態(tài)模塊（即創(chuàng)建 store 時(shí)聲明的模塊）。

在注冊(cè)一個(gè)新 module 時(shí)，你很有可能想保留過去的 state，例如從一個(gè)服務(wù)端渲染的應(yīng)用保留 state。你可以通過 preserveState 選項(xiàng)將其歸檔：store.registerModule("a", module, { preserveState: true })。

模塊重用
有時(shí)我們可能需要?jiǎng)?chuàng)建一個(gè)模塊的多個(gè)實(shí)例，例如：

創(chuàng)建多個(gè) store，他們公用同一個(gè)模塊 (例如當(dāng) runInNewContext 選項(xiàng)是 false 或 "once" 時(shí)，為了在服務(wù)端渲染中避免有狀態(tài)的單例)
在一個(gè) store 中多次注冊(cè)同一個(gè)模塊
如果我們使用一個(gè)純對(duì)象來聲明模塊的狀態(tài)，那么這個(gè)狀態(tài)對(duì)象會(huì)通過引用被共享，導(dǎo)致狀態(tài)對(duì)象被修改時(shí) store 或模塊間數(shù)據(jù)互相污染的問題。

實(shí)際上這和 Vue 組件內(nèi)的 data 是同樣的問題。因此解決辦法也是相同的——使用一個(gè)函數(shù)來聲明模塊狀態(tài)（僅 2.3.0+ 支持）：

如：
const MyReusableModule = {
  state () {
    return {
      foo: "bar"
    }
  },
  // mutation, action 和 getter 等等...
}

Vuex 并不限制你的代碼結(jié)構(gòu)。但是，它規(guī)定了一些需要遵守的規(guī)則：

1. 應(yīng)用層級(jí)的狀態(tài)應(yīng)該集中到單個(gè) store 對(duì)象中。
2. 提交?mutation?是更改狀態(tài)的唯一方法，并且這個(gè)過程是同步的。
3. 異步邏輯都應(yīng)該封裝到?action?里面。

只要你遵守以上規(guī)則，如何組織代碼隨你便。如果你的 store 文件太大，只需將 action、mutation 和 getter 分割到多帶帶的文件。
對(duì)于大型應(yīng)用，我們會(huì)希望把 Vuex 相關(guān)代碼分割到模塊中。下面是項(xiàng)目結(jié)構(gòu)示例：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API請(qǐng)求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我們組裝模塊并導(dǎo)出 store 的地方
    ├── actions.js        # 根級(jí)別的 action
    ├── mutations.js      # 根級(jí)別的 mutation
    └── modules
        ├── cart.js       # 購(gòu)物車模塊
        └── products.js   # 產(chǎn)品模塊