為什么會有模塊化异吻？
由于使用單一狀態(tài)樹唱凯，應(yīng)用的所有狀態(tài)都會集中在一個比較大的對象桨仿，當(dāng)應(yīng)用比較復(fù)雜時睛低，store對象就會變得臃腫，因此，就有了Vuex模塊化
模塊化的簡單應(yīng)用
定義兩個模塊 user 和 setting
user中管理token
setting中管理應(yīng)用名稱name
const store = new Vuex.Store({
modules: {
user: {
state: {
token: '1212'
}
},
setting: {
state: {
name: 'beizi'
}
}
},
<template>
<div>
<div>token:--- {{ $store.state.user.token }}</div>
<div>name:--- {{ $store.state.setting.name }}</div>
<div>1</div>
</div>
</template>
模塊化的命名空間
剛才的user模塊還是setting模塊钱雷，它的 action骂铁、mutation 和 getter 其實(shí)并沒有區(qū)分，都可以直接通過全局的方式調(diào)用 如
但是急波，如果我們想保證內(nèi)部模塊的高封閉性从铲，我們可以采用namespaced來進(jìn)行設(shè)置
- 高封閉性？
- 可以理解成 一家人如果分家了澄暮，此時名段，你的爸媽可以隨意的進(jìn)出分給你的小家，你覺得自己沒什么隱私了泣懊，我們可以給自己的房門加一道鎖（命名空間 namespaced）,你的父母再也不能進(jìn)出你的小家了
modules: {
user: {
// 命名空間
namespaced: true,
state: {
token: '1212'
},
mutations: {
// 這里的mutations 是user的
upToken(state) {
state.token = '666'
}
}
},
setting: {
state: {
name: 'beizi'
}
}
},
使用 createNamespacedHelpers 創(chuàng)建基于命名空間的輔助函數(shù)
<template>
<div>
<div>token:--- {{ $store.state.user.token }}</div>
<button @click="upToken"> 更改token</button>
<div>name:--- {{ $store.state.setting.name }}</div>
<div>1</div>
</div>
</template>
<script>
import { createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')
export default {
methods: {
...mapMutations(['upToken'])
}
}
</script>
