vuex~

1.Vuex的学习内容

Vuex中有5个内容需要学习：

1. state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）

2. mutations ： 使用它来修改数据(类似于methods)

3. getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )

4. actions： 发起异步请求

5. modules： 模块拆分

（1）state的作用

概念：State 本质上就是 Object 对象

作用：用来存储全局共享的数据

格式：

方式一：

在组件中，通过this.$store.state.属性名来访问。

在模板中，则可以省略this而直接写成： {{$store.state.属性名}}

方式二： 

基于 Vuex 提供的 mapState 辅助函数，可以方便的把 Store 中指定的数据，映射为当前组件的计算属性：

两步: 1.导入辅助函数 mapState 2.映射组件的计算属性

（2）用mutations修改公共数据

通过调用mutations来修改定义在state中的公共数据。注意:不要直接修改state中的数据

定义格式：

每一项都是一个函数，可以声明两个形参：

• 第一个参数是必须的，表示当前的state。在使用时不需要传入

• 第二个参数是可选的，表示载荷(payload)，是可选的。在使用时要传入的数据

方式一：

this.$store.commit('mutation名', 实参)

注意: this.$store.commit('mutation名', 实参)只能有两个参数

第一个参数是mutations中的方法名

第二个参数是要传递的参数.如果要传递多组数据,可以将这个些数据包装成一个数组或对象

方式二：

基于 Vuex 提供的 mapMutations 辅助函数，可以方便的把 Store 中指定的方法，映射为当前组件的 methods：

两步: 1.导入辅助函数 mapMutaions 2.映射组件的方法

（3）actions-发异步请求

• actions是vuex的一个配置项

• 作用：发异步请求获取数据，调用mutations来保存数据

• 要点：

  • action 内部可以发异步请求操作

  • action是间接修改state的：是通过调用 mutation来修改state

 

 定义格式：

调用格式

在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action

方式一：

在组件中，通过 this.$store.dispatch('xxx') 方法，即可触发指定名称的 Action 方法

 方式二：

基于 Vuex 提供的 mapActions 辅助函数，可以方便的把 Store 中指定的 Action，映射为当前组件的 methods：

两步: 1.导入辅助函数 mapActions 2.映射组件的方法

（4）getters的派生状态

在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样)

定义格式：

 方式一：

在组件中通过：$store.getters.getter的名字 来访问

方式二：

基于 Vuex 提供的 mapGetters 辅助函数，可以方便的把 Store 中指定的 Getters，映射为当前组件的计算属性computed：

1.导入辅助函数 mapActions

2.映射组件的计算属性

（4）modules来拆分复杂业务

命名空间

namespaced（命名空间）可以解决不同模块之间成员名称冲突的问题。在实际项目开发中，建议为每个 Module 模块都开启命名空间！

开启命名空间

在定义模块时，只需在模块的根节点中声明 namespaced: true 选项，即可为当前模块开启命名空间：

当模块启用了 namespaced: true 选项之后，模块就有了自己的命名空间。此时，模块内的成员需要通过模块的注册名称才可以访问到。

命名空间下模块中的state数据

方式1: 要加上模块名

获取数据项：  {{$store.state.模块名.数据项名}}

方式2:

使用 mapState 函数来简化访问的过程

命名空间下模块中的mutations方法的调用

方式1:

this.$store.commit('模块名/方法名')

方式2:

命名空间下的 action 和 getter

2.全日vuex的图形关系

图1： actions和mutations和state的关系图

 图2：全天核心API小结