Vuex

1. vue中各个组件之间传值
- 1.1 父子组件
- 1.2 非父子组件或父子组件
2. Vuex
- 2.1 Vuex简介
- 2.2 Vuex组成部分
3. vuex使用步骤
- 3.1 安装
- 3.2 创建store模块，分别维护state/actions/mutations/getters
- 3.3 引入模块
- 3.4 在main.js中导入并使用store实例
4. vuex的核心概念：store、state、getters、mutations、actions
- 4.0 store
- 4.1 state(保存数据的容器)
- 4.2 getters(getXxx)
- 4.3 mutations(setXxx)
- 4.4 actions
5. 同步与异步
- 同步
- 异步

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

具体组件船执行详解点击了解组件传值

1.1 父子组件

父组件–>子组件，通过子组件的自定义属性：props
子组件–>父组件，通过自定义事件：this.$emit(‘事件名’,参数1,参数2,…);

1.2 非父子组件或父子组件

第一种方式：
通过数据总数Bus，this.root.root.root.emit(‘事件名’,参数1,参数2,…)
第二种方式：
更好的方式是在vue中使用vuex
用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。
我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据

2. Vuex

引用官网解释概念图

2.1 Vuex简介

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），
让其在各个页面上实现数据的共享包括状态，并且可操作

2.2 Vuex组成部分

1.State：单一状态树
2.Getters：状态获取
3.Mutations：触发同步事件
4.Actions：提交mutation，可以包含异步操作
5.Module：将vuex进行分模块

3. vuex使用步骤

3.1 安装

打开cmd命令进入指定盘符进行以下命令操作
npm install vuex -S

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

在src下新建目录store
index.js
state.js
actions.js
mutations.js
getters.js

3.3 引入模块

在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块
const store = new Vuex.Store({state,getters,actions,mutations})

引入代码块

import Vue from 'vue'
import Vuex from 'vuex'
import state from './State'
import getters from './Getters'
import actions from './Actions'
import mutations from './Mutations'
Vue.use(Vuex)
const store = new Vuex.Store({state,getters,actions,mutations})export default store

3.4 在main.js中导入并使用store实例

4. vuex的核心概念：store、state、getters、mutations、actions

4.0 store

每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
const store = new Vuex.Store({
state, // 共同维护的一个状态，state里面可以是很多个全局状态
getters, // 获取数据并渲染
actions, // 数据的异步操作
mutations // 处理数据的唯一途径，state的改变或赋值只能在这里
})

4.1 state(保存数据的容器)

状态，即要全局读写的数据
const state = {
resturantName:‘飞歌餐馆’
};
this.$store.state.resturantName;//不建议

4.2 getters(getXxx)

获取数据并渲染，
const getters = {
resturantName: (state) => {
return state.resturantName;
}
};

 注1：getters将state中定义的值暴露在this.$store.getters对象中，我们可以通过如下代码访问this.$store.getters.resturantName注2：state状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态，如下：computed: {resturantName: function() {return this.$store.getters.resturantName;}}

4.3 mutations(setXxx)

处理数据的唯一途径，state的改变或赋值只能在这里

 注1：mutations中方法的调用方式不能直接调用this.$store.mutations.setResturantName('KFC')，必须使用如下方式调用：this.$store.commit(type,payload);// 1、把载荷和type分开提交store.commit('setResturantName',{resturantName:'KFC'})// 2、载荷和type写到一起store.commit({type: 'setResturantName',resturantName: 'KFC'})注2：一定要记住，Mutation 必须是同步函数。为什么呢？异步方法，我们不知道什么时候状态会发生改变，所以也就无法追踪了如果我们需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要Actions了mutations: {someMutation (state) {api.callAsyncMethod(() => {state.count++})}}

4.4 actions

数据的异步(async)操作
Action类似于 mutation，不同在于：
1.Action提交的是mutation，而不是直接变更状态
2.Action可以包含任意异步操作
3.Action的回调函数接收一个 context 上下文参数，注意，这个参数可不一般，它与 store 实例有着相同的方法和属性
但是他们并不是同一个实例，context 包含：
1. state、2. rootState、3. getters、4. mutations、5. actions 五个属性
所以在这里可以使用 context.commit 来提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

setResturantNameByAsync: (context, payload) => {
console.log(‘xxxx’);
setTimeout(() => {
console.log(‘yyyy’);
console.log(payload)
// state.resturantName = payload.resturantName;
context.commit(‘setResturantName’, payload); //Action提交的是mutation
}, 6000)
console.log(‘zzzz’);
}
按顺序调用，6秒后执行此方法体

界面获取代码块

<template><div><h3>页面1：欢迎来到{{msg}}</h3><button @click="buy">盘它(同步)</button><button @click="buyAsync">盘它(异步)</button><button @click="doAjax">盘它(Ajax)</button></div>
</template><script>export default{data(){return {};},computed:{msg(){/* 取值方式 */return this.$store.state.resturantName;}},methods:{buy(){this.$store.commit('setResturantName',{resturantName:'同步操作'});},buyAsync(){this.$store.dispatch('setResturantNameByAsync',{resturantName:'异步操作'});},doAjax(){this.$store.dispatch('doAjax',{_this:this})}}}
</script><style>
</style>

5. 同步与异步

同步

同步模式，即上述所说的单线程模式，一次只能执行一个任务，函数调用后需等到函数执行结束，
返回执行的结果，才能进行下一个任务。如果这个任务执行的时间较长，就会导致「线程阻塞」

异步

异步模式，即与同步模式相反，可以一起执行多个任务，函数调用后不会立即返回执行的结果，
如果任务A需要等待，可先执行任务B，等到任务A结果返回后再继续回调。

Vuex简介（带操作实例）相关推荐

python课堂实例_享学课堂带你了解并读懂Python列表中的6种操作实例
原标题:享学课堂带你了解并读懂Python列表中的6种操作实例今天为大家来介绍一下很多人在享学课堂上学习Python时,经常会用到列表,列表(list)就是动态数组,相当于C++标准库的Vector ...
.ne中的控制器循环出来的数据如何显示在视图上_Web程序设计-ASP.NET MVC4数据库操作实例...
ASP.NET MVC4数据库操作实例之前文章介绍了MVC4与Pure框架结合进行的网页设计过程中如何定义控制器.方法.模型.视图等.并使用实例进行了简单说明.本文将在此基础上进一步说明如何使用MV ...
STM32 进阶教程 8 - 位带操作
前言有过51单片机开发经历的朋友应该都对51的IO口或一些特殊寄存器可以直接按位操作的方式不陌生吧,那么在stm32中有没有类似的操作呢,答案是肯定的,本节将给大家介绍如何在STM32中实现位带操作 ...
PDF.NET数据开发框架实体类操作实例（for PostgreSQL，并且解决自增问题）
PDF.NET数据开发框架实体类操作实例(MySQL) 的姊妹篇,两者使用了同一个测试程序,不同的只是使用的类库和数据库不同,下面说说具体的使用过程. 1,首先在App.config文件中配置数据库连 ...
STM32（五）------GPIO位带操作
GPIO位带操作介绍位带简介外设位带区 SRAM位带区位带区和位带别名区地址转换 GPIO 位带操作代码解析 GPIO 寄存器映射 GPIO位操作主函数介绍位带简介位操作就是可以单独 ...
mysql中dml操作_MySQL的DML语言操作实例
补充说明,外键:不要使用外键,一切外键概念都在应用层解决. 补充说明,数据库的列,也就是字段名,尽量带上飘符号` 数据库存在的意义:数据存储和数据管理. 数据库:行(数据),列(字段) 注意:本页是解 ...
Quill编辑器操作实例详解
今天分享下"Quill编辑器操作实例详解"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧. ...
linux系统uptime解读,Linux uptime命令操作实例
Linux命令中,uptime命令除了能够查看系统cpu使用率外(详见系统之家如何使用w和uptime命令查看Linux系统使用率),还能查看系统运行时间等,下面小编就给大家详细介绍下uptime命令 ...
计算机应用基础与操作,计算机应用基础教程与操作实例（Windows7+Office2010）/21世纪高等职业教育规划教材·计算机公共课系列...
<计算机应用基础教程与操作实例(Windows7+Office2010)/21世纪高等职业教育规划教材·计算机公共课系列>结合高等职业教育培养高技能型人才的特点,根据教育部新制定的< ...

Vuex简介（带操作实例）

Vuex

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

1.1 父子组件

1.2 非父子组件或父子组件

2. Vuex

2.1 Vuex简介

2.2 Vuex组成部分

3. vuex使用步骤

3.1 安装

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

3.3 引入模块

3.4 在main.js中导入并使用store实例

4. vuex的核心概念：store、state、getters、mutations、actions

4.0 store

4.1 state(保存数据的容器)

4.2 getters(getXxx)

4.3 mutations(setXxx)

4.4 actions

5. 同步与异步

同步

异步

Vuex简介（带操作实例）相关推荐

最新文章

热门文章