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'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实例
main.js
import store from './store'
newVue({
el:'#app',
router,
store,//在main.js中导入store实例
components: {
App
},
template:'',
data: {//自定义的事件总线对象，用于父子组件的通信
Bus: newVue()}})
4.vuex的核心概念：store、state、getters、mutations、actions
store：每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。
state ：共同维护的一个状态，state里面可以是很多个全局状态
getters：获取数据并渲染
actions：数据的异步操作
mutations：处理数据的唯一途径，state的改变或赋值只能在这里
图解：
4.1 state(保存数据的容器)
状态，即要全局读写的数据
state.js
export default{//定义变量，名字自定义
htname:'世人皆怜李清照，无人惜我鱼玄机',
hhname:'本是青灯不归客，却因浊酒留风尘',
}
读取：
VuexPage1.vue
第一个vuex页面:
{{ht}}
data(){return{
};
},
computed: {
ht() {return this.$store.state.htname; //不推荐这种方式
}
},
}
效果：
还有一种方式获取值
VuexPage2.vue
第二个vuex页面:
{{ht}}
data(){return{
ht:''};
},//使用钩子函数
created(){this.ht=this.$store.state.hhname;
},
}
效果：
4.2 getters(getXxx)
获取数据并渲染
注1：getters将state中定义的值暴露在this.$store.getters对象中，我们可以通过如下代码访问
this.$store.getters.name
注2：state状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态
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了
4.4 actions
数据的异步(async)操作
sethtnameAsync: (context, payload) =>{
console.log('啦啦啦');
setTimeout(()=>{
console.log('哈哈哈');
context.commit('sethtname', payload);
},3000);
console.log('略略略');
},
vuex综合完整案例
定义变量 state.js
export default{
//定义变量，名字自定义
htname:'世人皆怜李清照，无人惜我鱼玄机', //后面基本上用的是这个变量
hhname:'本是青灯不归客，却因浊酒留风尘',
}
显示页面VuePage1.vue
第一个vuex页面:
{{ht}}
换诗词
一个月后换诗词
测试vuex中使用ajax
data(){return{
};
},
methods: {
hscht() {this.$store.commit('sethtname',{
htname:'一身诗意千寻普，万古人间四月天',
});
},
hschtAsync() {this.$store.dispatch('sethtnameAsync',{
htname:'世事一场大梦，人生几度秋凉',
});
},
doAjax(){this.$store.dispatch('doAjax',{
_this:this,
});
}
},
computed: {
ht() {//return this.$store.state.htname; //不推荐这种方式
return this.$store.getters.gethtname;
}
},
}
getters.js 获取数据并且渲染
export default{
gethtname: (state) => {
return state.htname;
}
}
效果：
mutations.js
export default {
sethtname: (state, payload) => {
state.htname = payload.htname;
},
}
效果就是点击换诗词就会换成别的诗词
==》点击换诗词
现在我们来用Action来代替mutations
export default {
sethtnameAsync: (context, payload) => {
console.log('啦啦啦');
setTimeout(() => {
console.log('哈哈哈');
context.commit('sethtname', payload);
}, 3000);
console.log('略略略');
},
doAjax:(context, payload) => {
//vuex是不能被vue实例的
let _this =payload._this;
let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
// let url = 'http://localhost:8080/T216_SSH/vue/userAction_login.action';
console.log(url);
_this.axios.post(url,{}).then((response) => {
console.log('doAjax............');
console.log(response);
}).catch((response)=>{
console.log(response);
});
},
}
效果是：我给它设定了三秒钟，所以三秒钟后它自动换诗词(为了展示效果就输出在控制台看是否成功)，并且参加了异步玩法
谢谢观看！
xpage 传参_Vuex入门、同步异步 存取值相关推荐
- xpage 传参_jQuery iScroll.js 移动端滚动条美化插件第1/5页
demo: iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项. 一.用法 iScroll对要滚动的元素进行初始化,且不限制一个页 ...
- shell传参python脚本和获取返回值的探索方式
一.python脚本 1.情况1:正常return 文件名test1.py #无参数有返回值的函数 def Have_return():return 55if __name__ == '__main_ ...
- Java执行JavaScript代码：传参、获取变量、返回值、JSON对象
脚本包 Java 脚本功能是在 javax.script 包中.这是一个比较小的,简单的API.脚本的出发点是 ScriptEngineManager 类,ScriptEngineManager是一个 ...
- xpage 传参_一个轻量级的Android路由框架，基于ARouter上进行改良，优化Fragment的使用，可结合XPage使用。...
XRouter 一个轻量级的Android路由框架,基于ARouter上进行改良,优化Fragment的使用,可结合XPage使用. 关于我 特征 由于是借鉴了ARouter,拥有ARouer所有特征 ...
- python函数调用位置_python函数定义,调用,传参,位置参数及关键字参数,返回值
使用函数是真正开始编程的第一步,函数y=f(x)我们并不陌生,对x进行一顿操作得到一个值y.给不同的x,进行相同的操作,得到相应的y值. 程序层面函数是执行特定任务的一段代码,将一段代码定义成函数并为 ...
- Python基础day04【函数（定义与调用、文档说明、传参函数、全局变量、返回值、嵌套调用）】
视频.源码.课件.软件.笔记:超全面Python基础入门教程[十天课程]博客笔记汇总表[黑马程序员] Python基础day04[字典] 目录 3.函数 函数的定义和调用 函数定义 PEP8规范 ...
- java jframe传参_在JFrame之间传递值
首先,你的程序设计似乎有些偏差,好像你正在为你的一个窗口使用JFrame,你实际上应该使用JDialog,因为它听起来好像一个窗口应该依赖于另一个窗口. 但无论如何,您传递的GUI对象的引用与标准的非 ...
- argparse：Python命令行传参
诸神缄默不语-个人CSDN博文目录 argparse模块(Python官方文档:argparse - 命令行选项.参数和子命令解析器 - Python 3.10.3 文档),可以用来在用命令行运行Py ...
- django 路由传参
1.使用默认路由传参 要从 URL 中捕获值,请使用尖括号. 捕获的值可以选择包含转换器类型.例如,用于 <int:name>捕获整数参数.如果不包括转换器/,则匹配任何字符串,不包括字符 ...
最新文章
- LeetCode-笔记-45.跳跃游戏II-贪心算法
- 一张图说明 函数, 实例(对象), 原型之间的关系
- 【LSH源码分析】p稳定分布LSH算法
- 资产支持证券(Asset-Backed Security)
- android 模糊度处理_图像处理评价指标之模糊度、清晰度（待更新）
- 【JavaScript】各种事件
- Android编译过程详解（三）
- pycharm写python三个双引号_Pycharm中批量添加单引号，双引号的方法（爬虫Headers中批量加引号）...
- struts标签logic:iterate的用法
- odoo 中实现多列搜索
- PyQt5|PySide2 UI界面内嵌web浏览器的方法
- 基于改进SSIM算法的图像清晰度识别
- 7部史诗级自然纪录片，孩子14岁前要看完！
- 阿里巴巴十周年晚会，马云震撼照片
- 大一python基础编程试卷_Python编程基础练习题
- 一个Web人眼中的小程序和小游戏
- Linux程序员语录,Linux和Git之父 Linus Torvalds 的那些经典语录
- 全面了解超声波传感器
- Qt::Painter 详解
- JavaScript 页面资源加载：onload，onerror