vuex中几个文件的说明及方法调用

 时间:2026-04-21 17:42:21

1、一般vuex的文件结构如下

保存在store文件夹下

vuex中几个文件的说明及方法调用

2、index.js,更多的都命名为store.js,这不重要

Vuex 中 Store 的模板化定义如下

图二是logger提供的信息,方便我们查看state数据的变化

vuex中几个文件的说明及方法调用

vuex中几个文件的说明及方法调用

3、state.js

相当于数据库,定义了应用数据的数据结构及初始状态

vuex中几个文件的说明及方法调用

4、getters.js

就是获取state中状态,仅单向的获取数据,不做任何修改。

vuex中几个文件的说明及方法调用

5、mutation-types.js

这个脚本下存放的都是一些vuex常用的变量

当然这个不是必须的,也可以没有,那么为什么要建一个这样的文件呢?

原因是便于书写方便和一个eslink工具等帮我们检测一些错误的;

vuex中几个文件的说明及方法调用

6、mutations.js

定义state数据的修改操作

从图上可以看出mutation-types定义的变量在这里得到了应用

vuex中几个文件的说明及方法调用

7、actions.js

调用mutation方法对数据进行操作,

这里可以对数据进行一些复杂的操作,mutations中只是简单的数据操作

vuex中几个文件的说明及方法调用

8、调用getters方法

先import引入mapGetters方法

在vue的computed下调用...mapGetters([]),中括号中写入要获取的数据的getters方法

vuex中几个文件的说明及方法调用

9、调用mutations方法

先import引入mapMutations方法

在vue的methods下调用...mapMutations({}),大括号中写入要修改的数据的mutations方法

vuex中几个文件的说明及方法调用

10、调用ations方法

先import引入mapActions方法

在vue的methods下调用...mapActions([]),中括号中写入要修改的数据的ations方法

vuex中几个文件的说明及方法调用

  • 怎么使用美图秀秀软件将图片调节为星芒特效
  • #过年#过年做什么生意赚钱/过年卖什么赚钱
  • 豆腐鲫鱼汤的做法大全
  • 腋下有异味怎么办
  • 鉴定瓷器的工具 瓷器鉴定
  • 热门搜索
    左肩膀疼是怎么回事 出汗多怎么办 上海建桥学院怎么样 去雀斑方法 子宫腺肌症怎么治疗 豆奶视频app最新版下载方法 凉菜大全 鸡肉怎么做好吃又简单 简历中自我评价怎么写 耳机有电流声怎么办