vuex的使用

vuex的介绍

简介：vuex是一个 vue 的 状态管理工具（状态就是数据）

使用：安装vuex插件要初始化一个仓库，在store/index.js存放vuex

State

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 中的 State 中存储。

所以一般都在state对象中存储数据，通过store直接访问或者通过辅助函数进行使用数据。

mutations

vuex同样遵循单向数据流，组件中不能直接修改仓库的数据。所以state数据的修改只能通过mutations。

步骤：

1.定义mutations对象，对象中存放修改state的方法

2.组件中提交调用mutations

注意：

mutation是可以传递参数的`this.$store.commit('xxx',参数)`

使用步骤：

1.提供mutation函数(带参数-提交载荷payload)

2.页面中提交调用mutation

提交参数只能一个，如果有多个参数，包装成一个对象传递

mapMutations

mapMutations是辅助函数，映射方法

它是把位于mutations中的方法提取了出来，映射到组件methods中

使用步骤：

1.导入函数

2.封装函数

actions

作用：处理异步操作

使用步骤;

1.提供action方法

2.页面中dispatch调用

mapActions

作用：mapActions是把位于actions中的方法提取了出来，映射到组件methods中

使用步骤：

1.导入函数

2.封装函数

getters

作用：除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters(类似于计算属性)

1.定义getters

2.访问getters

①通过store访问getters

②通过辅助函数mapGetters映射