Vue — Vuex模块
目的:由于Vuex使用的是单一状态树,所有的应用状态都会集中到一个比较大的对象。所以我们拆分store,每一个组件的store创建一个单独的模块,便于维护。
1.创建modules文件夹
2.配置子模块
const state = { userInfo :{ name : '巧克力的雨天', age : 9, score : 10998 } } const mutations = {} const actions = {} const getters = {} export default { state,mutations,actions,getters }
3.引入到store/index主模块中
import user from './modules/user' import setter from './modules/setter' const store = new Vuex.Store({ strict : true, state : { }, mutations : {}, actions : { }, getters : {}, modules : { user,setter } })
4.访问子模块中的状态state
尽管已经分模块了,但是子模块的状态还是会挂在跟级别的state中,属性名就是模块名
(1)直接通过模块名访问 $store.state.模块名.XXX
<div :style="{color:$store.state.setter.theme}"> {{ $store.state.user.userInfo.name }} {{ $store.state.setter.theme }} </div>
(2)通过mapState映射,需要开启命名空间
-第一种
computed: { ...mapState(['user','setter']), }, <div :style="{ color: setter.theme }"> {{ user.userInfo.name }} {{ setter.theme }} </div>
-第二种
...mapState('user',['userInfo']), ...mapState('setter',['theme']), <div :style="{ color: theme }"> {{ userInfo.name }} {{ theme }} </div>
5.访问getters
(1)直接通过模块名访问
const state = { userInfo :{ name : '巧克力的雨天', age : 9, score : 10998, id : 'iiiiiuuuuu' } } const mutations = {} const actions = {} const getters = { //分模块后 state参数指的是自己模块的state idUpper(state){ return state.userInfo.id.toUpperCase() } } export default { namespaced : true, //开启命名空间 state,mutations,actions,getters }
<div> {{ $store.getters['user/idUpper'] }} </div>
(2)通过mapGetters映射
computed: { ...mapGetters('user',['idUpper']) }, <div> {{ idUpper }} </div>
6.mutation
注意:默认模块中的mutation和actions会背挂载到全局,需要开启命名空间,才会被挂载到子模块
(1)直接通过store调用
const mutations = { changeTheme(state,n){ state.theme = n } }
<button @click="changeTheme"> 改theme </button> methods: { changeTheme(){ // this.$store.commit('模块名/mutation名',参数) this.$store.commit('setter/changeTheme','blue') } }
(2)通过mapMutations映射
methods: { ...mapMutations('setter',['changeTheme']), } <button @click="changeTheme('black')"> 改theme </button>
6.action(同mutation)
(1)直接调用
const mutations = { changeTheme(state,n){ state.theme = n } } const actions = { changeColor(context,n){ setTimeout(() => { context.commit('changeTheme',n) }, 2000); } }
changeColor(){ this.$store.dispatch('setter/changeColor','red') } <button @click="changeColor"> 2s后改theme </button>
(2)通过mapActions映射
...mapActions('setter',['changeColor']), <button @click="changeColor('green')"> 2s后改theme </button>