为什么要用vuex？页面由多个视图组成，用户操作会引视图的状态变化。

  • 多个视图依赖于同一状态（例如：菜单导航）

  • 来自不同视图的行为需要变更同一状态（例如：评论弹幕）

    vuex 的作用

  • 为vue.js开发的状态管理模式
  • 组件状态集中管理

  • 组件状态改变遵循统一的规则
    vuex 使用store.js

state:组件状态
mutations:唯一可以改变vuex状态的方法集。

vuex的使用

在组件1（info.vue）中引store.js:import store from '@/store'(@代表src目录)，

在组件1中的methods中引用store.js中定义的方法，并将状态变化值保存在store.js中

其它组件(about.vue)要引用组件1中改变的值就要引入store.js

vuex可以理解为状态管理中央，由store.js来实现。

注意：vuex刷新页面状态就没了，所以需要localStorage或者sessionStorage来配合

下面是具体的使用方法：

1.查询数据：this.$store.state.name   |    this.$store.getters.getUsername

2.修改数据：this.$store.dispatch('changeName', 'newname')

vuex 理解的更多相关文章

  1. vuex理解之modules小记

    好记性不如烂笔头 demo预览 源代码 前情提要 关于vuex,其实很久以前就研究使用过,还研究过 flux,redux之类的体系,当时感觉对于 state,action,dispatch,views ...

  2. VueX理解

    什么是Vuex? 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 个人理解:Vue ...

  3. Vuex理解与使用

    1.Vuex是什么 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,用于管理页面的数据状态.提供统一数据操作的生态系统.在组件中可以任意获取仓库中的数据.和Vuex类似的还有redux ...

  4. vuex所有核心概念完整解析State Getters Mutations Actions

    vuex是解决vue组件和组件件相互通信而存在的,vue理解起来稍微复杂但一旦看懂择即为好用 安装: npm install --save vuex 引入 import Vuex from 'vuex ...

  5. vue2.x中请求之前数据显示以及vuex缓存的问题

    在项目中遇到两个问题,简单的做个笔记来记录自己解决的问题,可能不是很好的处理办法,欢迎提出,自己还在不断优化中... 第一个是vue在加载页面的时候,会先加载静态资源,这个时候数据还没有请求回来,用户 ...

  6. 前端Vue框架-vuex状态管理详解

    新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...

  7. MVC和MVVM设计模式简单理解

    1.mvc设计模式理解 Model: 模型 持有所有的数据状态和业务逻辑; 泛指数据库,链接数据库,建立数据模型 View: 视图 用来展示数据模型在页面上,泛指前端 Controller: 控制器, ...

  8. 干货分享：vue2.0做移动端开发用到的相关插件和经验总结(2)

    最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...

  9. Vue 全家桶

    第 1 章:Vue 核心 1.1. Vue 的基本认识1.1.1. 官网1) 英文官网: https://vuejs.org/2) 中文官网: https://cn.vuejs.org/ 1.1.2. ...

随机推荐

  1. OpenFOAM Tutorial Standard Solvers【转载】

    转载自:http://www.cnblogs.com/fortran/articles/1996927.html boundaryFoam Steady-state solver for 1D tur ...

  2. mysql8安装与卸载

    参考: https://www.cnblogs.com/zxwen/p/9448797.html https://blog.csdn.net/weixin_30073553/article/detai ...

  3. LeetCode 快乐数（Happy Number）

    题目描述 编写一个算法来判断一个数是不是“快乐数”. 一个“快乐数”定义为:对于一个正整数,每一次将该数替换为它每个位置上的数字的平方和,然后重复这个过程直到这个数变为 1,也可能是无限循环但始终变不 ...

  4. ArcGIS后台地理处理（64 位）

    注: 后台地理处理(64 位) 可用作 ArcGIS 10.1 for Desktop.Service Pack 1 及更高版本上的独立安装.只有在已安装 后台地理处理(64 位) 产品的情况下,以下 ...

  5. 基于python的人脸识别（检测人脸、眼睛、嘴巴、鼻子......）

    本文链接:https://blog.csdn.net/James_Ray_Murphy/article/details/79209172 import numpy as np import cv2 # ...

  6. javascript中的Error对象

    在javascript中一旦代码解析或运行时发生错误,javascript引擎就会自动产生并抛出一个Error对象的实例,然后整个程序就中断在发生错误的地方. Error对象的实例有三个基本的属性: ...

  7. SpringCloud学习成长之路七 高可用配置中心

    上一篇文章讲述了一个服务如何从配置中心读取文件,配置中心如何从远程git读取配置文件,当服务实例很多时,都从配置中心读取文件,这时可以考虑将配置中心做成一个微服务,将其集群化,从而达到高可用,架构图如 ...

  8. Laravel 别名Redis 与 Redis 扩展冲突

    use Redis; //通过别名引用会报错 今天尝试使用了 Laravel 的 redis 结果报了如下错误. Non-static method Redis::xxx() cannot be ca ...

  9. CentOS安装文件共享samba

    参考:https://jingyan.baidu.com/article/03b2f78cdf811c5ea237aebc.html https://www.linuxidc.com/Linux/20 ...

  10. jenkins的maven插件

    如图所示的maven项目也是一个jenkins插件:https://github.com/jenkinsci/maven-plugin 可以在插件管理里面安装: