Vue.use(Vuex)
new Vue({
store:store
})
子组件可以通过$store访问
state mapState
computed：{
...mapState({
count:state=>state.count
})
}
getters store.getters.count
getters:{
count(state,getters){ 参数一是state，参数二是getters
}
}
可以返回一个函数，就可以带参数
getters:{
count(state)=>(arg)=>{
return {}
}
computed:{
...mapGetters([""])
}
Mutation
$store.commit("name",value)
methods:{
...mapMutations({
})
}
Actions
actions:{
increment(context,arg){ 参数一store实例对象本身
context.commit()
}
}
$store.dispach()
mapActions
modules 分模块
new Vuex.Store({
state:{},
modules:{
user:{
state:{
}
}
}
})
...mapState({
user: (state)=>根模块直接点 state.attrname 子模块 state[moduleA].attrname
})
...mapGetters({
getter:"" 没开启命名空间的时候 getters不区分根模块还是子模块，直接写getters名称就能找到，开启了需要
})
actions(context)参数一会暴露根模块的rootState的仓库数据
getters(state,getters,rootState) 参数三为根模块的仓库数据
命名空间
如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
子模块访问全局getters
getters:{
moduleGetter(state,getters,rootState,rootGetters){
}
}
actions(context) context也带有rootGetters参数
在子模块中触发根模块的方法
actions:{
actionFun({dispach}){
dispach("根组件方法",null,{root:true})
}
}
在子组件中定义全局actions
actions:{
actionfun:{
root:true,
handler:()=>{
}
}
}
模块动态注册
store.registerModule()
store插件
