xpage 传参_Vuex入门、同步异步 存取值

目的：

1、了解vuex中的各个js文件的用途

2、利用vuex存值

3、利用vuex取值

4、Vuex的异步同步加载问题

1. vuex中各个组件之间传值

1.父子组件

父组件-->子组件，通过子组件的自定义属性：props

子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...);

2.非父子组件或父子组件

通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...)

3.非父子组件或父子组件

更好的方式是在vue中使用vuex

方法1: 用组件之间通讯。这样写很麻烦，很容易写晕。

方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据

2. Vuex

Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行变更。

Vuex分成五个部分：

State：单一状态树

Getters：状态获取

Mutations：触发同步事件

Actions：提交mutation，可以包含异步操作

Module：将vuex进行分模块

图解：

3. vuex使用步骤

3.1 安装

npm install vuex -S

3.2 创建store模块，分别维护state/actions/mutations/getters

store

index.js

state.js

actions.js

mutations.js

getters.js

3.3 在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块

除了index.js以外其他四个js文件都需要引入下面这个模块

index.js

import Vue from 'vue'