vuex (学习笔记)

参考：vuex 中文官网 ：https://vuex.vuejs.org/zh/guide/

参考：视频https://www.bilibili.com/video/BV1dp4y1S7G6?p=5&vd_source=278c05b32a3bebe03fa33ea23672a200

目录

 

一、Vuex是什么

二、State

三、Getter

四、Mutation

五、Action

六、辅助函数（map*）

七、Module

八、MUTATIONS_TYPE

---

一、Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、State

state相当于组件中的data，专门用来存放全局的数据

目录：store/index.js

目录：Home.vue

三、Getter

getters相当于组件中的computed(计算属性)，getters是全局的，computed是组件内部使用的

目录：store/index.js

 目录：Home.vue

四、Mutation

=》 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

mutations相当于组件中的methods，但是它不能使用异步方法（定时器、axios）

目录：store/index.js

第二个参数是 形参用来传递参数

 目录：Btn.vue

调用这个方法

2的位置为传递的参数

五、Action

actions是store中专门用来处理异步的，实际修改状态值的，还是mutations

目录：store/index.js

方法还是写在Mutation中

 目录：Btn.vue

 

六、辅助函数（map*）

mapMutations和mapActions在组件中都是写在methods里面

例如：

but页面

mapState和mapGetters在组件中都是写在computed里面

Home页面

About页面

 

七、Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

例：

我们的store可以认为是一个主模块，它下边可以分解为很多子模块，子模块都可以单独拿出来写，写完再导入到主模块中。下面以 `users` 子模块举例：

users模块中也可以拥有state，getters，mutations和actions，所有的属性和方法该怎么写就怎么写。但是users的index.js文件中，需要写入 namespaced：true 命名空间，

然后在store中的index.js中引入到modules中

在组件中获取值的方法：

$store.state.users.nickName

 在组件中触发mutations的方法：

目录：

store下的 index.js页面

 store下的 users文件夹下的index.js页面

  store下的 users文件夹下的state.js页面

  store下的 users文件夹下的mutations.js页面

Home页面：

八、MUTATIONS_TYPE

将mutations中所有的方法，归纳起来。

目录：mutations_type.js

 目录：store/index.js

 组件中：