编辑
2023-04-13
Vuex-Version3
0
请注意,本文编写于 439 天前,最后修改于 336 天前,其中某些信息可能已经过时。

目录

module
说明
创建模块
访问模块中的数据
修改模块中的数据
模块的局部状态
注意
命名空间
模块中使用辅助函数
步骤

module

说明

解决单一状态树,项目解构复杂臃肿时;vuex提供模块功能将store分割为module,每个module都包含state、getters、mutations、actions以及子模块module

创建模块

  1. store下创建module文件夹,再在Modlue文件夹下创建模块文件

module创建目录

2.模块文件配置 配置同store实例中一样,导出 Eg moduleA.js

const moduleA = { state: {}, getters: {}, mutations: {}, actions: {} } export default moduleA
  1. 在index.js即store实例中注册模块

module创建

访问模块中的数据

this.$store.state.模块名(store中注册的模块名).数据名

Eg 取数据

修改模块中的数据

使用mutations和commit提交

模块的局部状态

注意

除了state局部的,getters、mutations、actions都是全局

对于模块内部的mutation和getter,接收的第一个参数是模块的局部状态对象

对于actions和getters,其第三个参数为根store实例的数据

命名空间

默认情况下,模块内部的action、mutation和getter 是注册在全局命名空间的——这样使得多个模块能够对同一mutation或action作出响应

通过添加namespaced:true的方式使其成为带命名空间的模块,此时state、mutation、action、getter都是局部命名空间

命名空间开启后修改数据

模块中使用辅助函数

步骤

  1. 引入辅助函数
  2. 正常使用即可

Eg

... computed:{ ...mapState("模块名",["要获取的数据"]) }, methods:{ ...mapMutations("模块名",["触发的函数"]) }

本文作者:RKLS

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!