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 介绍的更多相关文章

  1. vue2.0 axios封装、vuex介绍

    一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击  跳转, ...

  2. vuex介绍

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...

  3. vuex介绍和vuex数据传输流程

    1.什么是vuex? 公共状态管理:解决多个非父子组件传值麻烦的问题:简单说就是多个页面都能用Vuex中store公共的数据 a.并不是所有的数据都要放在Vuex中,只有各个组件公用的一些数据会放在V ...

  4. vuex介绍--一篇看懂vuejs的状态管理神器

    原文,请点击此链接http://www.ituring.com.cn/article/273487

  5. 五、vue状态管理模式vuex

    一.vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 即data中属性同时有一 ...

  6. vuex 入门

    vuex.js 状态(数据)管理 在vue中当我们管理数据的时候比较乱,我们要用到下面的这个库,vuex.js Vuex介绍 每一个Vuex应用的核心就是store(仓库),他是用来存储数据的 &qu ...

  7. vue组件通信传值——Vuex

    一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vu ...

  8. 06-vue项目02:vuex、Mutation、Action、ElementUI、axios

    1.Vuex 1.为什么使用VueX data从最上面的组件,一层层往下传值,一层层的验证 Vue单向数据流 “中央空调“,代理 VueX 解决数据 传值.. 2.Vuex介绍与安装 (1)Vuex官 ...

  9. Vue学习日记(四)——Vue状态管理vuex

    前言 先说句前话,如果不是接触大型项目,不需要有多个子页面,不使用vuex也是完全可以的. 说实在话,我在阅读vuex文档的时候,也很难以去理解vuex,甚至觉得没有使用它我也可以.但是直到我在项目碰 ...

随机推荐

  1. poj 2112(二分+网络流)

    Optimal Milking Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 15749   Accepted: 5617 ...

  2. IOS 使用DSYM文件定位Bug 的具体位置

    在项目的开发中,我们通常需要排查和修改测试中和发布后线上的一些bug,现在有一些第三方的bug分享和查找工具SDK,如腾讯的Bugly和听云等,包括苹果的开发工具xcode也自带 bug查找工具.那么 ...

  3. React-Native Navigator 过渡动画卡顿的解决方案

    在RN0.44版本之前,路由导航跳转几乎是使用的是Navigator组件,在0.44版本以后就不推荐使用了,官方推荐的是react-navigation,当然还是可以在废弃的库中找到: import ...

  4. 深入理解js中的立即执行函数(function(){…})()

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( f ...

  5. es6 --数组--Array.from() 、Array.isArray()、Array.of()、find()、findIndex()、fill()、entries() 、keys() ,values()

    将两类对象转为真正的数组 Array.from()方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Se ...

  6. LaTeX 如何在文档的侧面插入图片实现"绕排"?

    https://www.zhihu.com/question/26837705 https://blog.csdn.net/u012856866/article/details/70305834

  7. (1)JavaScript基础1

    一.javaScript 由三部分组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 二.在html中使用javascript HTML5模板 <! ...

  8. luogu P2158 [SDOI2008]仪仗队

    题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...

  9. [Bzoj3687]简单题(bitset)

    3687: 简单题 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1150  Solved: 565[Submit][Status][Discuss] ...

  10. 提高速度 history 的利用

    history的介绍history是shell的内置命令,其内容在系统默认的shell的man手册中.history是显示在终端输入并执行的过命令,系统默认保留1000条.[root@localhos ...