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的 ...
随机推荐
- SpringBoot中使用Maven插件,上传docker镜像
开启docker远程端口 我上一篇里面写了,这里暴露的路径: 18.16.202.95:2375 简单构建 配置pom.xml文件 在properties中增加一行指定远程主机的位置 <prop ...
- HTTP协议之chunk,单页应用这样的动态页面,怎么获取Content-Length的办法
当客户端向服务器请求一个静态页面或者一张图片时,服务器可以很清楚的知道内容大小,然后通过Content-Length消息首部字段告诉客户端需要接收多少数据.但是如果是动态页面等时,服务器是不可能预先知 ...
- arguments简单函数 求整数递加和
function add(n){if(n == 1) return 1;else return n + arguments.callee(n-1);alert(arguments.callee(1)) ...
- ESA2GJK1DH1K基础篇: Android连接MQTT简单的Demo
题外话 我老爸也问我物联网发展的趋势是什么!!!!!! 我自己感觉的:(正在朝着 "我,机器人" 这部电影的服务器方向发展) 以后的设备都会和服务器交互,就是说本地不再做处理,全部 ...
- 浅谈C/C++回调函数(Callback)& 函数指针
摘要:回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是 ...
- 将float数字按照一定格式写入到文件中
/* float.c */ #include<stdio.h> #include<string.h> int main() { FILE *fp = fopen("D ...
- 每日一问:不一样的角度吐槽下 DataBinding
我们项目采用的是 kotlin && DataBinding 处理的,可能你会疑问,既然用的是 kotlin,为啥没有用 kotlinx?新的页面当然是用的 kotlinx 啦,但我们 ...
- 20165230田坤烨网络对抗免考报告_基于WIN10的渗透攻击
目录 简单信息收集 主机发现 ping nmap 端口扫描 nmap OS及服务版本探测 nmap -sV 绕过防火墙尝试 诱饵 随机数据长度 随机顺序扫描目标 MAC地址欺骗 实现win10的渗透攻 ...
- 关于微信小程序前端Canvas组件教程
关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
- leetcode 763. 划分字母区间
题目描述: 字符串 S 由小写字母组成.我们要把这个字符串划分为尽可能多的片段,同一个字母只会出现在其中的一个片段.返回一个表示每个字符串片段的长度的列表. 示例 1: 输入: S = "a ...