vuex的使用

概述

---

 

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

集中存储的数据是响应式的，能够实时地保持数据与页面状态的同步。

 

核心内容

---

 

vuex主要的核心内容是：

1、state:类似组件中的data,存储应用程序中所有组件能共享的数据。

2、mutaions:提供了改变状态的方法，vuex规则中规定只能通过 mutations里面的方法修改全局状态。

3、actions: 异步修改全区状态。

4、getter: 类似组件的计算属性，对全局状态进行加工处理。

使用

---

 

在使用vuex的情况下组件间共享数据的方式：

1、父向子传递数据：v-bind绑定属性

2、子向父传递数据：v-on事件绑定

3、兄弟组件间 传值：eventBus

private/inject 实现组件间的传值？

 

组件中访问state中数据的方式有两种

第一种方式：

this.$store.state.全局数据名称

第二种方式：

1、从vuex中按需导入mapState函数

import {mapState} from 'Vuex'

2、在组件中通过es的开展运算符，将当前组件需要的属性映射为计算属性。

methods:{
...mapState(['状态名'])
}

 

mutaton事件：

vue中直接在组件中修改state状态是不允许的?  （实际这样操作了，程序也是可以运行额，可能只是在规则上这要规定）

所以有了mutation：必须是 同步函数（异步的话，状态与页面数据不能保持一致了？）

1、在vue中只能通过mutation来变更store中的数据，不可以直接操作store中的数据

2、操作麻烦，但是可以 集中 监控所有数据的变化（数据放在统一放在mutation里面修改，好定位出错位置）

组件中调用mutations函数的方法：

1、this.$store.commit("type");type 定义在mutations中的函数名

2、从vuex中导入mapMutaions ，映射到组件的方法中

 

Actions事件：

异步操作只能通过actions，在actions中要通过mutations间接的变更数据。

actions{
    asycAdd function（context）{
 　　  　　  setTimeout(()=>{
　　　　　　context.commit("type"); //type指mutiaons中定义的方法名
　　　　},1000)
　　}
}

 

在组件中怎么触发actions方法：

1、this.$store.dispatch("asycAdd");

2、从vuex中导入mapActions ，映射到组件的方法中。

 

Getter的作用：

用于对state中的数据加工处理，不会改变其值，state中的数据发生改变页面发生变化，类似vue中的计算属性。

在组件中使用getter的方法：

1、this.$Store.getters.type; 

2、从vuex中导入mapGetters,映射到组件的方法中。

 

 

疑问

---

 

1、在vuex中actions异步操作为什么能够保证状态和页面数据的同步。