六 Vue学习 首页 (下)
一:Store介绍:
state: 相当于数据
action: action去commit mutations
mutation: 只有mutation 才能改变state
例:
const store = new Vuex.Store({
state: {
count:
},
mutations: {
// 加1
INCREMENT(state) {
state.count++;
},
// 减1
DECREMENT(state) {
state.count--
}
},
actions: {
increment(context) {
context.commit("INCREMENT");
},
decrement(context) {
context.commit("DECREMENT");
}
}
})
2: Vuex 除了提供我们 Store 对象外,还对外提供了一系列的辅助函数,方便我们在代码中使用 Vuex,提供了操作 store 的各种属性的一系列语法糖:
...mapState(['adminInfo']): 将 store 中的 state 映射到局部计算属性中。其实就是保持局部变量和store中的同步。
...mapActions(['getAdminData']):将 store 中的 dispatch 方法映射到组件的 methods ,其实就是把store中的函数导进来,用来处理mapState过来的State。
3: watch : 对应一个对象,键是观察表达式,值是对应回调:
观察adminInfo的值,如果发生变化,就执行newValue函数。
watch: {
adminInfo: function (newValue){
if (newValue.id) {
this.$message({
type: 'success',
message: '检测到您之前登录过,将自动登录'
});
this.$router.push('manage')
}
}
4: this.$router.push('manage'):
除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。router.push(location)
想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。
当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...)。
声明式:<router-link :to="...">
编程式:router.push(...)
5: 综合上面知识, 分析如下代码片段:
mounted(){ // HTML加载完后,就会执行这段,取得管理员信息
this.showLogin = true;
if (!this.adminInfo.id) {
this.getAdminData()
}
computed: { // 当adminInfo发生变化是,实时更新布局变量
...mapState(['adminInfo']), }, // 这里绑定布局变量和store中的adminInfo
...mapActions(['getAdminData']), // 引入store中的getAdminData方法。供上面的this.getAdminData()调用。
watch: { // 每当adminInfo 变化,就执行function , 如果是已经登录的用户就调用this.$router.push('manage')
adminInfo: function (newValue){
if (newValue.id) {
this.$message({
type: 'success',
message: '检测到您之前登录过,将自动登录'
});
this.$router.push('manage')
}
}
6: 最后介绍一下this.$refs
一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值;
但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。
然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了;
例:
<div id="app">
<input type="text" ref="input1"/> // 定义ref
<button @click="add">添加</button>
</div>
<script>
new Vue({
el: "#app",
methods:{
add:function(){
this.$refs.input1.value =""; //this.$refs.input1 减少获取dom节点的消耗
}
}
})
</script>
六 Vue学习 首页 (下)的更多相关文章
- 五 Vue学习 首页学习 (上)
首页: http://localhost:8002/#/, 登录页面如下: index.js文件中如下的路由配置,转过去看login.vue是如何实现的. const routes = [ { ...
- Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建
一 使用环境: windows 7 64位操作系统 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载 https: ...
- day 84 Vue学习六之axios、vuex、脚手架中组件传值
Vue学习六之axios.vuex.脚手架中组件传值 本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- 2017-2018-1 20155228 《信息安全系统设计基础》第六周学习总结&课下作业
20155228 2017-2018-1 <信息安全系统设计基础>第六周学习总结&课下作业 教材学习内容总结 异常及其种类 异常可以分为四类:中断(interrupt) ,陷阱(t ...
- vue学习之路 - 4.基本操作(下)
vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...
- vue学习笔记(六)表单输入绑定
前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...
- vue学习起步:了解下
渐进式 有这么一句话,vue是渐进式框架. 抽取“渐进式框架”和“自底向上增量开发的设计”这两个概念是什么?中的解释: 渐进式代表的含义是:主张(主张指使用时的硬性要求)最少.来个对比就知道什么叫主张 ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
随机推荐
- HTML5实现两个视频循环播放!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【React Native开发】React Native控件之RefreshControl组件具体解释(21)
),React Native技术交流4群(458982758)种 enabled bool android平台适用 用来设置下拉刷新功能是否可用 progressBackgroundColo ...
- 微信小程序设置控件权重
项目中最常用的两种布局方式,水平布局和垂直布局,在微信小程序中实现起来也比较简单. 1.横向水平布局: 实现水平布局,需要四个view容器组件,其中一个是父容器.如下: & ...
- VS2012,VS2013启用SQLite的Data Provider界面显示
VS2012,VS2013启用SQLite的Data Provider界面显示 VS 2012默认是不带的SQLite的Data Provider,所以无法直接在VS 2012里管理SQLite的数据 ...
- 关于-O0、O1、O2、O3优化
少优化->多优化: O0 -->> O1 -->> O2 -->> O3 -O0表示没有优化,-O1为缺省值,-O3优化级别最高 整理自网络,仅供参考 1.- ...
- HTML5(石头剪刀布游戏开发)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- iOS 流布局 UICollectionView使用(UICollectionVIew的代理方法)
UICollectionViewDataSource协议 这个协议主要用于collectionView相关数据的处理,包含方法如下: 设置分区数(这个是可选实现的) - (NSInteger)numb ...
- 一文快速搞懂MySQL InnoDB事务ACID实现原理(转)
这一篇主要讲一下 InnoDB 中的事务到底是如何实现 ACID 的: 原子性(atomicity) 一致性(consistency) 隔离性(isolation) 持久性(durability) 隔 ...
- redux和mobx比较(二)
Redux Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 三大核心 在 Redux 中,最为核心的概念就是 action .reducer.store 以及 state,那 ...
- win7计划任务定时执行PHP脚本设置图解
做php开发的朋友有时候会希望自己的电脑能每天定时的运行一下某个脚本,但定时执行php脚本这种概念似乎多半是在linux中才提到,下面这篇文章主要和大家分享一下在win7下如何设置计划任务,以实现定时 ...