vuex简单化理解和安装使用
1.简单化理解
首先你要明白 vuex 的目的 就是为了 集中化的管理项目中 组件所有的 数据状态 (state)
0. 第一步你要明白 , store 的重要性 , store 类似一个中央基站,所有的信号和数据处理都必须 由 store 来处理 , store 其实本质也是一个对象 , 里面有 这 四个 必传的 属性 state actions mutations
1. state 是一个 对象 ,高于任何组件层面的对象,所以任何组件可以通过 mapState 获取到 你想要的 state 里面的数据 ,其中 mapState 其实就数据分发 , 通过ES6 改造 this.$store.state. 来取值
2. action 这个其实 就是 信号源 , 你要修改 state ,就要发送 (dispatch) action ,通知store 提交(commit) mutations ,
3. actions 写完 ,就紧接着写 mutations, mutation 负责 修改数据 ,接收action 发送过来的数据 , 修改state
4. state 修改完毕后 ,vuex的响应式数据系统 会重新刷新 组件
5. 你在组件里面需要做的就是 发送信号 ,通过store , 怎么发送信号呢,就是发出 action, 你可以 this.$store.dispatch('actionType',传递的参数) 或者 mapActions 来 直接取到 action , 然后函数触发
2.Vuex的安装使用
安装:
npm i vuex -S
引入:
import vuex from "vuex"
注入:
Vue.use(vuex)
创建store
export let store = new vuex.Store({
state:...,
mutations : ...,
....
})
将store实例注入到初始化代码中
new Vue({
data : ....,
....,
store:store
})
state : 封装数据模型
mutation : 封装修改数据模型方法 (必须是纯函数,必须是同步函数)
getter : 对数据模型进行二次计算 (相当于store的计算属性)
action : 封装业务逻辑 可以是非纯函数 也可以封装异步方法 (封装业务逻辑)
modules : 将多个小的store组装成大的store (用于store的拆分)
除了数据模型 其他的几个都是可全局访问的 为了避免开发时命名冲突 可开启局部命名空间
namespaced : 值为true时开启局部作用域
在组件内 需要通过计算属性将state中的数据传递给模板
{
computed : {
list : function(){
return this.$store.state.list
}
}
}
调用mutation : this.$store.commit("name",data)
this.$store.commit("home/name",data) //开启命名空间时
name为封装的mutation名 data为要传给mutation的数据 我们称之为载荷
调用getter : this.$store.getters["name"]
this.$store.getters["home/name"] //开启命名空间时
调用action : this.$store.dispath("name",data)
this.$store.dispath("home/name",data) //开启命名空间时
data同样为载荷
工具方法
mapState mapGetters mapMutations mapActions
使用:
{
data:...,
...,
computed:{
...mapState({
n : state=>state.name,
name : "name"
}),
...mapState(["name"]),
...mapState("home",["name"]),//开启命名空间时
}
}
vuex简单化理解和安装使用的更多相关文章
- vuex深入理解 modules
一.什么是module? 背景:在Vue中State使用是单一状态树结构,应该的所有的状态都放在state里面,如果项目比较复杂,那state是一个很大的对象,store对象也将对变得非常大,难于管理 ...
- 关于vuex的理解
刚开始学vue的时候,看到很多项目都有用vuex,抱着一种好奇的心态去看下vuex的官方文档,如下: Vuex官方文档 Vuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 ...
- 对vuex的理解
我用的vue安装了一个插件vuex插件 有3个 文件夹分别是actions(用于数据请求),getters(用于监听store),store(用于存储数据),
- vuex 深入理解
参考自:https://mp.weixin.qq.com/s?src=11×tamp=1528275978&ver=922&signature=ZeHPZ2ZrLir ...
- 转一篇关于vuex简单理解的文章
学习vuex半天摸不着头脑无意间发现了这篇文章 对vuex做了一个简单的阐述比较有助于我的理解 现在分享出来希望能给一些朋友一点帮助 这个是原文地址 http://www.ituring.com.c ...
- jenkins的理解及安装
目录 一.理论概述 二.安装 一.理论概述 Jenkins的介绍 Jenkins是一个基于MIT License协议的开源软件项目,是基于Java开发的一种持续集成(CI)工具,用于监控持续重复的 ...
- Vuex的理解以及它的辅助函数
理解:vue中的“单向数据流”,这里借用官网的图示: Vue是单向数据流,v-model只是语法糖而已.单向数据流就是:数据总是[向下传递]从父级组件传递给子组件,只能单向绑定.子组件内部不能直接修改 ...
- Vuex之理解Getters的用法
一.什么是getters在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用 ...
- vuex的理解
首先需要了解vuex的基本概念和使用方式,vue的官网也有很详细的说明或者浏览:https://zhuanlan.zhihu.com/p/24357762. vue是单页应用所以当页面刷新时vuex的 ...
随机推荐
- matlab-fsolve函数求解多元非线性方程
记录一下代码,方便下次套用模板 options=optimset('MaxFunEvals',1e4,'MaxIter',1e4); [x,fval,exitflag] = fsolve(@(x) m ...
- 【java异常】【redis】ERR Client sent AUTH, but no password is set
项目中使用jedis或redisson连接redis时,如果redis没有密码,但在配置文件中写为 spring: redis: database: 0 host: 127.0.0.1 passwor ...
- 【mybatis】JdbcType 与Oracle、MySql数据类型对应关系
- 修改MyEclipse/Eclipse左侧文字大小(MacOS/Windows)
一.Windows 首先找到 Eclipse/MyEclipse 的安装目录,然后找到如下目录: \plugins\org.eclipse.ui.themes_1.1.200.v20160815-05 ...
- MacOS更改启动台(launchpad)图标大小
原文链接:https://www.jianshu.com/p/18224d191bd2作者:麦壳君 小麦有点强迫症,觉得 Mac 启动台(Launchpad)里面系统默认的应用程序图标太大,所以想让它 ...
- 2.8/4/6/8mm/12mm焦距的镜头分别能监控多大范围?
2.8/4/6/8mm/12mm焦距的镜头分别能监控多大范围? 相关介绍 一.焦距和监控距离的关系 我司IPC镜头焦距有2.8/4mm/6mm/8mm等多种选择,可以满足室内外各种环境的拍摄需求.IP ...
- Rpm Creating Subpackages
转自:http://ftp.rpm.org/max-rpm/s1-rpm-subpack-spec-file-changes.html Spec File Changes For Subpackage ...
- ESA2GJK1DH1K升级篇: 升级STM32 预热: 单片机定时 使用 http 获取云端文本文件里面的内容,然后显示在液晶屏
前言: 实现功能概要 STM32使用AT指令控制Wi-Fi以TCP方式连接咱上节安装的Web服务器,然后使用http的get协议获取云端文本文件里面的内容, 然后把获取的数据显示在OLED液晶屏. ...
- ddns+ros(routeros)+centos7.6+nginx+php+dnspod
参考文章: http://www.myxzy.com/post-464.html https://www.cnblogs.com/crazytata/p/9686490.html php的源码下载: ...
- 51Nod1353 树
51Nod1353 树 传送门 思路 我们定义\(dp[i][j]\)代表第i个点联通块大小为j的方案总数,也可以把它理解为等待分配(不确定归属)的联通块大小为j的方案总数. 那么每次转移我们就使用一 ...