export default new Vuex.Store({
//存储数据
state:{
},
//方法
mutations:{
},
//计算属性
getters:{
},
//异步方法,(如ajax)
actions:{
},
//模块
modules:{
可以存放其他store
格式为:
(1)名称:{namespaced:true,state:{xx},mutations:{xx},getters:{xx},actions:{xx}}
若为mod文件
(1)文件中export default{ namespaced:true,state:{xx},mutations:{xx},getters:{xx},actions:{xx}}
在组件中调用:
第一种:
state: $store.state.模块名.键名
getters:$store.getters['模块名/方法名')
actions:$store.dispatch('模块名/方法名')
mutations:$store.commit('模块名/方法名')
第二种,使用命名mapState辅助函数,只对state有效
import {mapState} from 'vuex'
computed:{...mapState(['模块名'])}
调用:模块名.键名
}
})
代码示例:
引入的模块:
export default{
namespaced:true,
state:{
productNum:10
},
getters:{
brief:function(state){
return state.productNum+'件衣服';
}
},
actions:{
changeProNum(content){
setTimeout(()=>{
content.commit('addProNum');
},1000)
}
},
mutations:{
addProNum(state){
return state.productNum++;
}
}
}
组件:
<template>
<div>
<h1>{{$store.state.mod1.productNum}}</h1>
<h2>{{mod1.productNum}}</h2>
<h3>{{$store.getters['mod1/brief']}}</h3>
<button @click='$store.commit("mod1/addProNum")'>添加</button>
<button @click='$store.dispatch("mod1/changeProNum")'>异步添加</button>
</div>
</template>
<script>
import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
//获取模块state内容
let mapStateObj=mapState(['mod1'])
//获取模块getters内容
// let mapGettersObj=mapGetters(['brief'])
// let mapMutationsObj=mapMutations(['addProNum'])
// let mapActionsObj=mapActions(['changeProNum']);
export default{
name:'A',
data()
{
return{
count:0
}
},
methods:{
},
computed:{
...mapStateObj,
// ...mapGettersObj,
// ...mapMutationsObj,
},
mounted()
{
console.log(this);
},
methods:{
// ...mapActionsObj
}
}
</script>
<style>
</style>