六 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的计算属性和监听器 六 ...
随机推荐
- 规范-Git打标签与版本控制
Git打标签与版本控制规范 前言 本文适用于使用Git做VCS(版本控制系统)的场景. 用过Git的程序猿,都喜欢其分布式架构带来的commit快感.不用像使用SVN这种集中式版本管理系统,每一次提交 ...
- Spring mybatis自动扫描dao
Spring注解方式会出现找不到dao的bean的情况 [解决方案] 在mybatis配置文件中加入以下绑定dao的方式: <!-- mapper接口namepspace绑定方式 -->& ...
- Hihocoder #1602 : 本质不同的回文子串的数量 manacher + BKDRhash
#1602 : 本质不同的回文子串的数量 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个字符串S,请统计S的所有子串中,有多少个本质不同的回文字符串? 注意如果 ...
- 【BZOJ3451】Tyvj1953 Normal 点分治+FFT+期望
[BZOJ3451]Tyvj1953 Normal Description 某天WJMZBMR学习了一个神奇的算法:树的点分治!这个算法的核心是这样的:消耗时间=0Solve(树 a) 消耗时间 += ...
- 【BZOJ1776】[Usaco2010 Hol]cowpol 奶牛政坛 树的直径
[BZOJ1776][Usaco2010 Hol]cowpol 奶牛政坛 Description 农夫约翰的奶牛住在N (2 <= N <= 200,000)片不同的草地上,标号为1到N. ...
- terminal中 启动ios模拟器,并安装软件
启动运行模拟器: xcrun instruments -w 'iPhone 6 Plus' 在已经启动好的模拟器中安装应用: xcrun simctl install booted Calculato ...
- php 生成bing词典能导入的xml(有道词典->bing词典)
编程以来一直用网易有道词典查单词.翻译:最近一直在看英文方面的资料,于是越来越对有道词典(划词.广告,本来想转灵格斯的,但灵格斯没有android版)不满意,一番试用后决定转bing词典,于是想把有道 ...
- LeetCode:划分字母区间【763】
LeetCode:划分字母区间[763] 题目描述 字符串 S 由小写字母组成.我们要把这个字符串划分为尽可能多的片段,同一个字母只会出现在其中的一个片段.返回一个表示每个字符串片段的长度的列表. 示 ...
- 【转载】帧缓冲驱动程序分析及其在BSP上的添加
原文地址:(四)帧缓冲驱动程序分析及其在BSP上的添加 作者:gfvvz 一.BSP修改及其分析 1. BSP中直接配置的四个寄存器 S3C6410数据手册的第14.5部分是显示控制器的编程模型部 ...
- iOS开发 - 如何跳到系统设置里的各种设置界面
在iOS开发中,有时会有跳转系统设置界面的需求,例如提示用户打开蓝牙或者WIFI,提醒用户打开推送或者位置权限等.在iOS6之后,第三方应用需要跳转系统设置界面,需要在URL type中添加一个pre ...