Vuex命名空间namespaced的使用

Vuex 命名空间 namespaced Vuex 命名空间 2023-03-06 08:03:29 489人浏览安东尼

摘要

在项目中，如果需要用到Vuex，可以将 store 分割成多个模块（module），每个模块拥有自己的 state、mutation、action、getter，这样你的模块具有更高

在项目中，如果需要用到Vuex，可以将 store 分割成多个模块（module），每个模块拥有自己的 state、mutation、action、getter，这样你的模块具有更高的封装度和复用性，此时就用到了命名空间这个概念。（默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。）

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

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

export default {
  namespaced:true,
  state,
  getters,
  actions,
  mutations
}

2.组件中如何获取带有命名空间moduleA中的state数据？

1、基本方式：
    this.$store.state.moduleA.countA
2、mapState辅助函数方式：
    ...mapState({
        count:state=>state.moduleB.countB
    })
【例子】
 computed:mapState({
  //  将state中的商品列表数据作为Goodslist的属性
  goodslist:state=>state.goods.list   
 }),

组件中调用命名空间模块中的getters

computed:{
    // 使用扩展运算符“...”,将mapState和mapGetters返回的结果放到计算属性中
  ...mapState({
    // 绑定购物车中的商品
    items:state=>state.shopcart.items
  }),
  // 绑定购物车中的商品总价
  ...mapGetters('shopcart',{total:'totalPrice'})
},

到此这篇关于Vuex 命名空间 namespaced的使用的文章就介绍到这了,更多相关Vuex 命名空间 namespaced内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vuex命名空间namespaced的使用

本文链接: https://www.lsjlt.com/news/198534.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341