目录
2、…mapGetters：用于解构getters中定义的方法
3、…mapMutations：用于解构mutations中的方法，注意传参：在调用时直接传参
一、vuex的模块化---modules
1、vuex模块化的原因：
vuex维护的是一个单一的状态树，对于复杂的vue项目，若只有一个store，则该store就会非常臃肿难以维护，为了解决这个问题，vuex允许在vue项目中将store进行模块化的处理，即可以将一个大的store分解成若干个小的store，每个store都有自己的state、mutation、action、getter
2、命名空间：
（1）在默认情况下，模块内部的state、mutation、action、getter是全局的，即所有组件都可以使用
（2）若想让store有更好的封装性和复用性、在使用不会产生歧义，可以在store定义时加入 namespaced：true 配置，当模块注册后，所有的state、mutation、action、getter都会根据模块注册的路径调整命名
vue代码如下:
主仓库（store）
import Vue from 'vue'
import Vuex from 'vuex'
//导入子模块
import Counter from './modules/Counter';
import UserInfo from './modules/UserInfo';
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
a:Counter,//子模块仓库a
b:UserInfo//子模块仓库b
}
})
子store模块a，js文件
const Counter = {
namespaced: true,//开启命名空间
state:{
count:10,
info:'这是一个计数器',
},
getters:{
doubleCount(state){
return state.count * 2;
},
},
mutations:{//同步
add(state){//count加
state.count++;
},
},
actions:{//异步
asyncAdd(content){
setTimeout(()=>{
content.commit('add')
},2000)
}
}
}
export default Counter;组件中使用vuex（store）：
A组件触发
<template>
<div class="container">
<h5>A组件</h5>
<el-button size="mini" @click="add()">计数器加1</el-button>
<el-button size="mini" @click="asyncAdd()">计数器异步加1</el-button>
</div>
</template>
<script>
export default {
name:'CompontentA',
data() {
return {}
},
methods:{
handleAdd(){
//触发a子模块下muations的add方法,来修改state中的count状态值
this.$store.commit('a/add');
},
handleAddAsync(){
//向a模块下actions派发异步add方法,从而触发muations中的add方法
this.$store.dispatch('a/asyncAdd');
},
}
}
</script>
B组件显示数据
<template>
<div class="container">
<h5>B组件--显示信息</h5>
<div>info: <span> </span>{
{ thisMsg }}</div>
<div>计数器的值: {
{ thisCount }}</div>
<div>计数器值的2倍: {
{ thisDoubleCount }}</div>
</div>
</template>
<script>
export default {
name:'CompontentB',
data() {
return {
}
},
computed:{//使用到vue的计算属性,同步更新视图的数据
thisMsg(){
return this.$store.state.a.info;
},
thisCount(){
return this.$store.state.a.count;
},
thisDoubleCount(){//访问a模块下的doubleCount方法
return this.$store.getters['a/doubleCount'];
},
}
}
</script>
二、vuex的四个辅助函数
首先在使用时需从vuex中导出辅助函数
import {mapState,mapMutations,mapActions,mapGetters}from 'vuex';1、…mapState：用于解构state中状态属性
//基础写法：
count(){
return this.$store.state.cout
}
//简化写法
...mapState(['count'])2、…mapGetters：用于解构getters中定义的方法
// 基础写法
handleAddAsync(){
this.$store.dispatch('a/asyncAdd');
},
// 简化写法
...mapActions('a',['asyncAdd'])3、…mapMutations：用于解构mutations中的方法，注意传参：在调用时直接传参
//基础写法
handlerAdd(){ //同步加1：触发mutations中的addCount方法
this.$store.commit('addCount',{ num: 1 })
},
handlerSub(){ //同步减1：触发mutations中的subCount方法
this.$store.commit('subCount',{ num: 1 })
}
//简化写法
...mapMutations({
handlerAdd: 'addCount',
handlerSub: 'subCount'
}),
//html中直接传参的写法
<button @click="handlerAdd({num:1})">同步加1</button>
<button @click="handlerSub({num:1})">同步减1</button>4、…mapActions：用于解构actions中的方法
//基础写法
handlerAddAsyn(){ //异步加1：触发actions中addCountAsyn方法
this.$store.dispatch('addCountAsyn')
},
handlerSubAsyn(){ //异步减1：触发actions中subCountAsyn方法
this.$store.dispatch('subCountAsyn')
}
//简化写法
...mapActions({
handlerAddAsyn: 'addCountAsyn',
handlerSubAsyn: 'subCountAsyn'
})