vuex的高阶用法--命名空间(必学)

最新推荐文章于 2024-08-01 09:24:38 发布

听?闻

最新推荐文章于 2024-08-01 09:24:38 发布

阅读量225

点赞数 1

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_65591699/article/details/126987289

版权

在使用module 模块化的时候 易出现命名冲突的情况，这时候就需要使用vuex的命名空间 

如何使用？

1、在该模块中 添加 namespaced : true 

 modules: {
    goods: {
      namespaced: true,
      state: {
       
      },
      getters: {
      
      },
      mutations: {
       
 
      },
      actions: {
        
      }
    }
  }
2、在页面使用

获取state中的数值 ：{ { this.$store.state.goods.goodsNum } }

获取getters中的值 ：{ { this.$store.getters["goods/changeNum"] } } 

使用mutations中的方法 ：this . $store . commit ("goods/addNum");

使用actions中的方法 ： this . $store . dispatch ("goods/reduceNum");