Vuex怎么用(1)
1. vuex是什么
github站点: https://github.com/vuejs/vuex
在线文档: https://vuex.vuejs.org/zh-cn/
简单来说: 对应用中组件的状态进行集中式的管理(读/写)
2. 状态自管理应用
state: 驱动应用的数据源
view: 以声明方式将state映射到视图
actions: 响应在view上的用户输入导致的状态变化(包含n个更新状态的方法)
3. 多组件共享状态的问题
多个视图依赖于同一状态
来自不同视图的行为需要变更同一状态
以前的解决办法
* 将数据以及操作数据的行为都定义在父组件
* 将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)
vuex就是用来解决这个问题的
4. vuex的核心概念
1). state
vuex管理的状态对象
它应该是唯一的
const state = {
xxx: initValue
}
2). mutations
包含多个直接更新state的方法(回调函数)的对象
谁来触发: action中的commit('mutation名称')
只能包含同步的代码, 不能写异步代码
const mutations = {
yyy (state, data) {
// 更新state的某个属性
}
}
3). actions
包含多个事件回调函数的对象
通过执行: commit()来触发mutation的调用, 间接更新state
谁来触发: 组件中: $store.dispatch('action名称') // 'zzz'
可以包含异步代码(定时器, ajax)
const actions = {
zzz ({commit, state}, data1) {
commit('yyy', data2)
}
}
4). getters
包含多个计算属性(get)的对象
谁来读取: 组件中: $store.getters.xxx
const getters = {
mmm (state) {
return ...
}
}
5). modules
包含多个module
一个module是一个store的配置对象
与一个组件(包含有共享数据)对应
6). 向外暴露store对象
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
7). 组件中:
import {mapGetters, mapActions} from 'vuex'
export default {
computed: mapGetters(['mmm'])
methods: mapActions(['zzz'])
}
{{mmm}} @click="zzz(data)"
8). 映射store
import store from './store'
new Vue({
store
})
9). store对象
1.所有用vuex管理的组件中都多了一个属性$store, 它就是一个store对象
2.属性:
state: 注册的state对象
getters: 注册的getters对象
3.方法:
dispatch(actionName, data): 分发action
Vuex怎么用(1)的更多相关文章
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- vuex复习方案
这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.
- vuex 初体验
vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...
- vuex(1.0版本写法)
Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/ 2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...
- 关于Vue vuex vux 文档
01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex ----->>状态管理模块儿<<------- https://vuex.vue ...
- vuex
英文:(Introduction)中文:https://github.com/vuejs/vuex/issues/176(贡献者努力中)
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- Vue2.X的状态管理vuex记录
记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method -- ...
- 在vue1.0遇到vuex和v-model的坑
事情是这样的,在开发项目的过程中我使用了vuex并且在store中定义了一个保存用户信息的对象 userInfo : { 'nickName' : '', // 昵称 'password' :'', ...
- vuex 笔记
Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...
随机推荐
- [Wireshark]_002_玩转数据包
通过前一篇文章,我们大概了解了Wireshark,现在可以准备好进行数据包的捕获和分析了.这一片我们将讲到如何使用捕获文件,分析数据包以及时间格式显示等. 1.使用捕获文件 进行数据包分析时,其实很大 ...
- AD17无法复制原理图到Word的解决方法
标题: 解决AD17无法复制原理图到WORD 作者: 梦幻之心星 347369787@QQ.com 标签: [AD, Word, 原理图] 目录: 软件 日期: 2019-3-17 目录 前提说明: ...
- JS代码静态分析及挖掘
JavaScript 已经成为现代 Web 浏览器开发中最普遍的技术之一.使用客户端 JavaScript 框架(如 AngularJS,ReactJS 和 Vue.js)构建的应用程序已向前端输送了 ...
- jchdl - RTL实例 - MOS6502 ALU
https://mp.weixin.qq.com/s/nMxYVC2djk7DdAforerZPA 使用jchdl RTL实现MOS6502 CPU的ALU. 参考链接 https://git ...
- 【Storm】编程模型
元祖(tuple) 元组(Tuple),是消息传递的基本单元,是一个命名的值列表,元组中的字段可以是任何类型的对 象. Storm使用元组作为其数据模型,元组支持所有的基本类型.字符串和字节数组作为字 ...
- Linux(十) —— 使用 rz 和 sz 命令上传与下载
以CentOS 7 系统为例,一般上传下载都是使用的第三方工具,但是在操作上并不方便,每次都要找到对应的目录才可以执行上传.下载操作,比较麻烦. 而CentOS为例的 Linux 系统可以通过安装 插 ...
- Physic Design:Floorplan算法概览
仅用于学习交流,转载请联系本人. 1 floorplan是什么 floorplan常被翻译成布图规划,是指在芯片级别上对模块进行布局,也就是哪个单元放在什么地方,但是单元内部的具体布局并不关心.该步骤 ...
- Java实现 蓝桥杯 算法训练 Number Challenge(暴力)
试题 算法训练 Number Challenge 资源限制 时间限制:3.0s 内存限制:512.0MB 问题描述 定义d(n)为n的约数个数.现在,你有三个数a,b,c.你的任务是计算下面式子mod ...
- (Java实现) 工作分配问题
工作分配问题 时间限制: 1 Sec 内存限制: 128 MB [提交][状态][讨论版] 题目描述 设有n件工作分配给n个人.为第i个人分配工作j所需的费用为c[i][j] .试设计一个算法,计算最 ...
- python自学Day05(自学书籍python编程从入门到实践)
第6章 字典 6.1 一个简单的字典 先跟随书本创建一个简单的字典感受一下. alien_0 = {'color':'green','points':5} print(alien_0['color'] ...