vuex中的state、mutations 、actions 、getters四大属性如何使用
一、state (提供唯一的公共数据源)
方式1 在div中,$store.state.count
方式2
import {mapState} from ‘vuex’
computed:{
…mapState([‘count’])
}
在div中直接使用,{{count}}
二、 mutations (用于变更store中的数据)(不能执行异步操作,延时器)
方式1
在store.js中,
Mutations:{
Add(state) {
State.count++
}
}
butonOnclick {
this.$store.commit(‘add’)
}
方式2
Import {add} from ‘vuex’
Methods: {
…mapMutations([‘add’])
}
点击事件直接使用
三、Actions
actions 用于处理异步任务,但是action中还是要通过触发mutations的方式间接的变更数据。
注意:action中,不能直接修改state中的数据,必须通过context.commit()触发某个mutations才行。
方法1
Store.js中,
Actions: {
addN (context,step) {
setTimeout(()=> {
context.commit(‘add’)
})
}
}
buttonOnclick() {
this.$store.dispatch(‘addN’)
}
方法2
import {mapActions} from ‘vuex’
methods: {
…mapActions([‘addN’])
}
四、 getters
(用于对store中的数据进行加工处理形成新的数据)(不会修改state中的数据)
类似vue中的计算属性
方式1
{{this.$store.getters.名称}}
getters: {
showNum: state=> {
return ‘当前数量是’+ state.count + ’个’
}
}
方式2
Import {mapGetters} from ‘vuex’
Computed: {
…mapGetters([‘showNum’])
}
{{ showNum }}
最新文章
- Flexslider - 响应式的 jQuery 内容滚动插件
- C/C++相对论——C++中为什么要使用异常?
- Python Web实战 - 基于Flask实现的黄金点游戏
- C#基础--面向过程计算器
- substr
- c语言 快排排序
- js为表格添加行和列
- 成都IT公司面经及公司评价
- ReactiveSwift源码解析(十) Lifetime代码实现
- node 当中的 cnpm和npm 的区别和使用
- JavaScript之数组五大迭代方法总结
- 基于geotools的(两个)SHP要素变化提取方法预研
- vue+webpack+vue-cli获取URL地址参数
- js取整数、取余数
- 对不可描述的软件安装sfbo插件
- Core Mvc传值ViewData、ViewBag和return view(model)
- MySQL查询不使用索引汇总 + 如何优化sql语句
- 你不知道的Linux(持续更新中)
- duilib进阶教程 -- 在duilib中使用MFC (2)
- keras 上添加 roc auc指标
热门文章
- tensorflow读书笔记
- 利用CRT配合VBS脚本实现自动化巡检
- addeventlistener可以这样表示
- STM32L431 移植 LiteOS 时 _ebss _Min_Heap_Size _Min_Stack_Size 未找到或未定义
- Django中models的字段
- Kotlin学习-函数(表达式,lambda,高阶函数)
- golang实现简单的聊天室
- STM32定时器TIM_OC1PreloadConfig、TIM_ARRPreloadConfig函数详解
- DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0
- Smart200 设计注意设计