Vuex 命名空间 namespaced 介绍
web Vue 2023-02-15 309 0
关于本站

“最难不过坚持”

本人承接扒站仿站,php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

4005583 2346 35
文章标签更多
ThinkPHP (240)
Mysql (48)
DedeCms (33)
jQuery (58)
证件照 (1)
setInc (4)
setDec (4)
onclick (5)
打开边栏(ESC) 关闭边栏(ESC)
Vuex由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。
因此,Vuex 允许我们将 store 分割成模块(module),每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的,这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性,此时就用到了命名空间这个概念。

1.如何使模块成为一个命名空间模块?

你可以在单个模块中通过添加namespaced:true的方式使其成为带命名空间的模块。

const moduleA ={
    namespaced:true,  //开启namespace:true,该模块就成为命名空间模块了
    state:{
        count:10,
        countA:888
    },
    getters:{...},
    mutations:{...},
    actions:{...}
}
2.组件中如何获取带有命名空间moduleA中的state数据?
1、基本方式:
    this.$store.state.moduleA.countA
2、mapState辅助函数方式:
    ...mapState({
        count:state=>state.moduleB.countB
    })
3.组件中调用命名空间模块中的getters

共有三种方式,如下:
//1.
commonGetter(){
    this.$store.getters['moduleA/moduleAGetter']
},
//2.
...mapGetters('moduleA',['moduleAGetter']),此处的moduleA,不是以前缀的形式出现!!!
//3.别名状态下
...mapGetters({
    paramGetter:'moduleA/moduleAGetter'
}),
4.组件中调用命名空间模块中的Mutations

共有三种方式,如下:
//1,3加个前缀moduleA/,都可以实现。2使用辅助函数未变名称的特殊点!!!
//1.
commonMutation(){
    this.$store.commit('moduleA/moduleAMutation');
},
//2.
...mapMutations('moduleA',['moduleAMutation']),
//3.别名状态下
...mapMutations({
    changeNameMutation:'moduleA/moduleAMutation'
}),
5.组件中调用命名空间模块中的Actions(与mutations一致)

共有三种方式,如下:
1,3加个前缀moduleA/,都可以实现。2使用辅助函数未变名称的特殊点!!!
//1.
commonAction(){
    this.$store.dispatch('moduleA/moduleAAction')
},
//2.
...mapActions('moduleA',['moduleAAction']),
//3.别名状态下
...mapActions({
    changeNameAction:'moduleA/moduleAAction'
})

版权声明:本篇文章来源于网络。 来源链接

相关推荐
vue项目npm run serve默认浏览器打开
Vue | 2022-11-16 1198
1、在vue项目中,输入命令行  npm run serve   浏览器实现自动打开功能,需要添加 在配置文件(package.json)中添加 --open 2、浏览器自动打开后,可能会出现网址0.0.0.0:8080页面错误,见图 3、解决方法: 在--open后面再加上--...
vue项目,1:1 error The template requires child element vue/valid-template-root
Vue | 2022-11-25 1121
vue项目,1:1  error  The template requires child element  vue/valid-template-root vue必须要有一个根节点,在<template></template>里面添加一对<div>标签就好了!!...
评论:0条
评论加载中...
发表评论