vuex 介绍
vuex是为vue.js开发的状态管理模式,负责vue的状态管理,状态管理是干啥的呢,举个栗子,比如一个酒店,哪间屋子入住了客人,哪间屋子客人退房了,客人退房后,房间有没有清扫过,这些都需要去记录,以便给客人安排房间啊,给员工安排工作什么的,这时就需要这么一个工具,去记录这些状态,vuex做的其实就是这个事情。我们可以使用vuex设置菜单切换时候的状态,还可以用来管理弹幕等等,在单向数据流的应用中,vuex可以对组件进行集中管理,所以说vuex必不可少。
现在我们来使用一下vuex,还是用上篇文章用的那个使用vue-cli生成的那个工程,在工程中,已经生成了一个名叫store.js的文件,进入这个文件(下面的代码),我们从上往下看,文件先引入了vue和vuex,然后在vue对象上绑定了vuex,在vuex.Store方法里,传递了一个对象,里面有state、mutations和actions三个属性,state就是组件的状态,mutations是改变状态的方法集,直接操作state,而actions则是直接操作mutation,不是直接更改状态。
import Vue from 'vue';
import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({
state: { },
mutations: { },
actions: { },
});
然后我们在state里面定义一个状态count,在mutations里面来定义一个执行递增count方法:
import Vue from 'vue';
import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({
state: {
count: 1
},
mutations: {
increase () {
this.state.count ++
}
},
actions: { },
});
接下来,我们看下在组件中,怎么去使用vuex,首先,要引入store.js文件,然后在default这个对象里面去引用store,打开about.vue组件:
<template>
<div class="about">
<h1>This is an about page</h1>
<h1>count:{{msg}}</h1>
</div>
</template>
<script>
import store from '@/store';
export default {
name: 'about',
store,
data(){
return {
msg: store.state.count
}
}
}
</script>
最后,使用store.commit这个关键词,去修改count这个状态的值,打开info.vue这个组件,我们在这个组件中添加一个方法,来实现修改状态的功能:
<template>
<div class="about">
<h1>This is an info page</h1>
<button @click="add">点我状态加一</button>
</div>
</template> <script>
import store from '@/store';
export default {
name: 'Info',
store,
methods: {
add(){
store.commit('increase');
}
}
};
</script>
控制台运行工程,在chrome浏览器中看下效果:
vuex 介绍的更多相关文章
- vue2.0 axios封装、vuex介绍
一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击 跳转, ...
- vuex介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
- vuex介绍和vuex数据传输流程
1.什么是vuex? 公共状态管理:解决多个非父子组件传值麻烦的问题:简单说就是多个页面都能用Vuex中store公共的数据 a.并不是所有的数据都要放在Vuex中,只有各个组件公用的一些数据会放在V ...
- vuex介绍--一篇看懂vuejs的状态管理神器
原文,请点击此链接http://www.ituring.com.cn/article/273487
- 五、vue状态管理模式vuex
一.vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 即data中属性同时有一 ...
- vuex 入门
vuex.js 状态(数据)管理 在vue中当我们管理数据的时候比较乱,我们要用到下面的这个库,vuex.js Vuex介绍 每一个Vuex应用的核心就是store(仓库),他是用来存储数据的 &qu ...
- vue组件通信传值——Vuex
一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vu ...
- 06-vue项目02:vuex、Mutation、Action、ElementUI、axios
1.Vuex 1.为什么使用VueX data从最上面的组件,一层层往下传值,一层层的验证 Vue单向数据流 “中央空调“,代理 VueX 解决数据 传值.. 2.Vuex介绍与安装 (1)Vuex官 ...
- Vue学习日记(四)——Vue状态管理vuex
前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...
随机推荐
- jenkins发送html测试报告
jenkins发送html测试报告 https://blog.csdn.net/galen2016/article/details/77975965/ <!DOCTYPE html> & ...
- poj 1912 A highway and the seven dwarfs
A highway and the seven dwarfs Time Limit: 8000MS Memory Limit: 30000K Total Submissions: 2622 A ...
- CodeForces 333E. Summer Earnings
time limit per test 9 seconds memory limit per test 256 megabytes input standard input output standa ...
- js函数的四种调用方式以及对应的this指向
一.函数调用,此时this是全局的也就是window 1 var c=function(){ 2 alert(this==window) 3 } 4 c()//true 二.方法调用 var myOb ...
- L2-3. 悄悄关注【STL+结构体排序】
L2-3. 悄悄关注 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 新浪微博上有个“悄悄关注”,一个用户悄悄关注的人,不出现在 ...
- ‘cnpm' 不是内部或外部命令,也不是可运行的程序
昨天用npm 安装环境,实在太慢了,就想用cnpm,然后发现提示‘cnpm' 不是内部或外部命令,也不是可运行的程序. 看了很多方法,选择了下面这个,运气好到爆棚,就直接可以用了.其他的方法暂未去了 ...
- GPP加密破解工具gpp-decrypt
GPP加密破解工具gpp-decrypt GPP是Group Policy Preferences(组策略首选项)的缩写,这是一个组策略实施工具.通过该工具,网络管理员可以实现更多的网络管理,如驱 ...
- css查缺补漏1
css可以写在哪里 1.和要装饰的标签写在一起 2.内部样式表(内嵌式)是写在head头部标签中,并且用style标签定义 3.外部样式表(外链式) <head><link rel= ...
- kafka技术分享02--------kafka入门
kafka技术分享02--------kafka入门 1. 消息系统 所谓的Messaging System就是一组规范,企业利用这组规范在不同的系统之间传递语义准确对的消息,实现松耦合的异步数据 ...
- Linux BPF/bcc for Oracle Tracing
Luca Canali on 26 May 2016 Topic: In this post you will find a short discussion and pointers to the ...