五、vue状态管理模式vuex
一、vuex介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
即data中属性同时有一个或几个组件同时使用,就是data中共用的属性。相当于全局变量
适合开发大型单页应用
二、安装
npm install --save vuex
三、使用入门
前提:使用vue-cli构建的项目
1、引入vuex
1.新建一个store文件夹(这个不是必须的),并在文件夹下新建index.js文件,文件中引入我们的vue和vuex。记得要用Vue.use进行引用
import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex);
2.在main.js引入store目录下的index模块(默认index.js,可以省略),并且在实例化 Vue对象时加入 store 对象
import store from './store/' new Vue({
el: '#app',
router,
store,//使用store,子组件通过 `this.$store` 调用
template: '<App/>',
components: { App }
})
2、使用store
1.store完整配置
const store = new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {
home: {
state: {},
getters: {},
mutations: {},
actions: {},
}
},
strict: process.env.NODE_ENV !== 'production'
});
2.用export default 封装代码,让外部可以引用
export default store;
3、说明
vuex 核心仓库是store(state,mutations,actions,getter,modules)。
- action 提交mutation,而不是直接更改状态
- action 可以包括异步操作,mutation只能同步
- modules 将store分割成模块(modules),每个模块拥有自己的(state,mutations,actions,getter);方便维护
- store 改变状态时通过 (commit) mutations
例子分析:模块a / 模块b 模块b获取模块a的数据
方法1: 用组件之间通讯。这样写很麻烦,并且写着写着,估计自己都不知道这是啥了,很容易写晕。
方法2: 我们定义 全局变量。模块a的数据 赋值给全局变量 x。然后 模块b 获取x。这样我们就很容易获取到数据
我们把模块a 的数据叫 state。全局变量叫store。模块b 叫data
Getter 是一个纯函数,用于接收state 参数。返回你需要取的值
mutation 是对 state 进行修改
action 处理数据,对处理的数据 返回给 mutation 从而对 state 进行修改。
vuex最简单、最详细的入门文档
Vuex 使用详解
最详细的Vuex教程
vue--vuex详解
vuex文档
五、vue状态管理模式vuex的更多相关文章
- Vue状态管理模式---Vuex
1. Vuex是做什么的? 官方解释: Vuex 是一个专为Vue.js 应用程序开发的 状态管理模式 它采用 集中式存储管理 应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化 ...
- 理解Vue的状态管理模式Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态管理模式.集中式存储管理,一听就很高大 ...
- Vue.js状态管理模式 Vuex
vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 安装.使用 vuex 首先我们在 vue. ...
- Vue状态管理之Vuex
Vuex是专为Vue.js设计的状态管理模式.采用集中存储组件状态它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 1.首先让我们从一个vue的计数应用开始 ...
- 一文解析Pinia和Vuex,带你全面理解这两个Vue状态管理模式
Pinia和Vuex一样都是是vue的全局状态管理器.其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia. 本文将通过Vue3的形式对两者的不同实现方式进行 ...
- vue - 状态管理器 Vuex
状态管理 vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性.
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- Vue 状态管理之vuex && {mapState,mapGetters}
1 # 一.理解vuex 2 1.概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读写),也是一种组件间通信的方式,且适用于任意组件间 ...
- Vuex 状态管理模式
Vuex 是一个专为 Vue.js 设计的状态管理模式 vuex解决了组件之间同一状态的共享问题.当我们的应用遇到多个组件共享状态时,会需要: 多个组件依赖于同一状态.传参的方法对于多层嵌套的组件将会 ...
随机推荐
- JS基础(五)自定义函数
作用:是为了让重复使用的语句,方便进行调用. 定义格式: function 自定义函数名 (参数1, 参数2,...) { 执行的语句 } 函数的封装:把语句放到函数中去的过程. 参数:通过参数的改变 ...
- mysql 列转行处理
CREATE TABLE `table1` ( `id` ) DEFAULT NULL, `name` ) CHARACTER SET utf8 DEFAULT NULL ) ENGINE=MyISA ...
- [转]MySQL 数据库事务隔离级别
然后说说修改事务隔离级别的方法: 1. 全局修改,修改 mysql.ini 配置文件,在最后加上 1 #可选参数有:READ-UNCOMMITTED, READ-COMMITTED, REPEATAB ...
- php内置函数分析之str_pad()
PHP_FUNCTION(str_pad) { /* Input arguments */ zend_string *input; /* Input string 输入字符串*/ zend_long ...
- 前端学习 -- Css -- 有序列表和无序列表
列表就相当于去超市购物时的那个购物清单, 在HTML也可以创建列表,在网页中一共有三种列表: 1.无序列表 2.有序列表 3.定义列表 无序列表 - 使用ul标签来创建一个无序列表 - 使用li在ul ...
- 各种蕴含算法思想的DP - 2
study from: https://www.cnblogs.com/flashhu/p/9480669.html 3.斜率dp study from:http://www.cnblogs.com/ ...
- Ajax跨域CORS
在Ajax2.0中多了CORS允许我们跨域,但是其中有着几种的限制:Origin.Methods.Headers.Credentials 1.Origin 当浏览器用Ajax跨域请求的时候,会带上一个 ...
- JavaScript常用模块
JavaScript常用模块 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.序列化与反序列化 JSON.stringify(obj) 序列化 JSON.parse(str) ...
- Spark记录-Scala数组
Scala提供了一种数据结构叫作数组,数组是一种存储了相同类型元素的固定大小顺序集合.数组用于存储数据集合,但将数组视为相同类型变量的集合通常更为有用. 可以声明一个数组变量,例如:numbers,使 ...
- WINDOWS控制界面操作命令for WIN10
Windows系统:开始--运行--命令大全: cmd--------CMD命令提示符 cleanmgr-------垃圾整理 compmgmt.msc---计算机管理 conf----------- ...