export default new Vuex.Store({
//存储数据
state:{
},
//方法
mutations:{
},
//计算属性
getters:{
},
//异步方法,(如ajax)
actions:{
},
//模块
modules:{
可以存放其他store
格式为:
(1)名称:{state:{xx},mutations:{xx},getters:{xx},actions:{xx}}
其中:
模块的actions.js函数中
function({rootState}){xxx} 可以使用rootState访问根结点的state
模块的getters.js函数中
function({state, getters, rootState}){xxx} 第三个参使访问根节点的state
若为mod文件
(1)文件中export default{state:{xx},mutations:{xx},getters:{xx},actions:{xx}}
在组件中调用:
不使用命名空间(即模块还有一个属性:namespaced: true,);
第一种:
state: $store.state.模块名.键名
getters:$store.getters('方法名')
actions:$store.dispatch('方法名')
mutations:$store.commit('方法名')
(1)引入辅助函数
import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
获取模块内的
state:computed:{...mapState(['模块名'])}; 模块名.键名调用
或者采用带有命名空间的state写法
getters:computed:{...mapGetters(['函数名',...])}
mutations:methods:{...mapMutations(['函数名',...])}
actions:methods:{...mapActions(['函数名',...])}
使用命名空间(即模块还有一个属性:namespaced: true,);
方式一:
调用基础上加上当前模块名
如调用mutations:this.$store.commit('当前模块名/方法名')
辅助函数
getters:computed:{...mapGetters('模块名',['模块的函数名',...])}
mutations:methods:{...mapMutations('模块名',['函数名',...])}
actions:methods:{...mapActions('模块名',['函数名',...])}
state:computed:{...mapState({
模块中的state属性名:state=>state.模块名.state属性名
})};
方式二:
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions,xx } = createNamespacedHelpers('模块名')
辅助函数
getters:computed:{...mapGetters(['模块的函数名',...])}
mutations:methods:{...mapMutations(['函数名',...])}
actions:methods:{...mapActions(['函数名',...])}
state:computed:{...mapState(['属性名'])}
}
})
代码示例:
store:
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
import mod1 from './mod1'
Vue.use(Vuex);
//仓库对象,存放多组件共用数据
export default new Vuex.Store({
//data
state:state,
//methods,尽量在这里处理state中的状态
mutations:mutations,
//计算属性
getters:getters,
//异步方法(如ajax)
actions:actions,
//模块
modules:{
mod1
}
})
mod1:
export default{
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>{{brief}}</h3>
<h4>{{addProNum}}</h4>
<button @click='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>