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,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...
随机推荐
- poj 2112(二分+网络流)
Optimal Milking Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 15749 Accepted: 5617 ...
- IOS 使用DSYM文件定位Bug 的具体位置
在项目的开发中,我们通常需要排查和修改测试中和发布后线上的一些bug,现在有一些第三方的bug分享和查找工具SDK,如腾讯的Bugly和听云等,包括苹果的开发工具xcode也自带 bug查找工具.那么 ...
- React-Native Navigator 过渡动画卡顿的解决方案
在RN0.44版本之前,路由导航跳转几乎是使用的是Navigator组件,在0.44版本以后就不推荐使用了,官方推荐的是react-navigation,当然还是可以在废弃的库中找到: import ...
- 深入理解js中的立即执行函数(function(){…})()
javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( f ...
- es6 --数组--Array.from() 、Array.isArray()、Array.of()、find()、findIndex()、fill()、entries() 、keys() ,values()
将两类对象转为真正的数组 Array.from()方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Se ...
- LaTeX 如何在文档的侧面插入图片实现"绕排"?
https://www.zhihu.com/question/26837705 https://blog.csdn.net/u012856866/article/details/70305834
- (1)JavaScript基础1
一.javaScript 由三部分组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 二.在html中使用javascript HTML5模板 <! ...
- luogu P2158 [SDOI2008]仪仗队
题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...
- [Bzoj3687]简单题(bitset)
3687: 简单题 Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 1150 Solved: 565[Submit][Status][Discuss] ...
- 提高速度 history 的利用
history的介绍history是shell的内置命令,其内容在系统默认的shell的man手册中.history是显示在终端输入并执行的过命令,系统默认保留1000条.[root@localhos ...