vuex五个属性及其使用传参

state：vuex的基本数据，用来存储变量
geeter：从基本数据(state)派生的数据，相当于state的计算属性
mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
设置值
import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
state: {
//存入数据
ct: 0
},
mutations: {
//修改数据，只有mutation能修改数据
//state 是传的参数
add (state) {
state.ct++
},
addn (state, step) {
state.ct += step
},
jian (state) {
state.ct–
},
jiann (state, step) {
state.ct -= step
}
},
actions: {
//action是通过mutation来修改数据的，
是修改异步操作的
// context 可以看成Store实例
addasync (context) {
setTimeout(() => {
context.commit(‘add’)
}, 2000)
},
addnasync (context, step) {
setTimeout(() => {
context.commit(‘addn’, step)
}, 2000)
},
subacync (context) {
setTimeout(() => {
context.commit(‘jian’)
}, 2000)
}
},
getters: {
//相当于计算属性，用于修改state形成新的数据，state修改getters会跟着一起修改，不会影响原来的state数据
xinshu (state) {
return 当前最新数据为${state.ct}
}
},
modules: {
}
})
使用
1 使用点语法
1this.store.state.‘数据名’2this.store.state.‘数据名’ 2 this.store.state.‘数据名’2this.store.commit.‘mutation数据名’
3this.store.dispatch.‘action数据名’4this.store.dispatch.‘action数据名’ 4this.store.dispatch.‘action数据名’4this.store.state.‘getters数据名’
只有commit 和 dispatch才能触发各自的属性修改数据
2映射到计算属性或methods里面，再通过插值表达式引入即行
先引入import { mapState’,mapMutations, mapActions, mapGetters } from 'vuex基本就是map加属性名
然后隐射
…mapState([‘数据名’])
…mapMutations([‘mutation数据名’, ‘jiann’]),
…mapActions([‘action数据名’]),
…mapGetters([‘getters数据名’])
同步操作和异步操作数据是在计算属性中进行映射
下面是上面的代码的使用

当前的值ct为:{{$store.state.ct}}

传参就是在使用的时候在方法传参，同理，属性内页需要一个接受参数的变量

vuex五个属性及其使用传参相关推荐

我的Vu啊（vue 2.0，数据监听，计算属性，组件传参）
提示:个人Vue学习工作总结 (持续更新中如果有不对的地方还请前辈多多指点) 文章目录 vue 计算属性 computed vue 数据监听 wacth 提示:以下是本篇文章正文内容,下面案例可供 ...
mybatis多对一，一对一，多对多resultMap映射，pojo映射,传参集合,封装的对象传参
普通映射: <resultMap type=& ...
2021小白Python学习记录Day7 面向对象基础（上）（定义类和对象、__init__传参、self、魔术方法）
目录一.定义类和对象 1.定义类 2.创建一个对象 2.1 创建一个实例对象并调用实例方法 2.2 创建另一个实例对象: 2.3 添加实例属性二.__init__(self) 1. __init_ ...
vue路由传参那些事
vue路由传参为什么要使用vue传参 vue传参主要的主要方式(以下内容为vue3中使用) router-link 页面式跳转传参为什么要使用vue传参在写vue项目时大多数情况下会遇到动态路由 ...
JS一起学02：函数传参、操作属性第二种方式、提取行间事件、循环、this、焦点问题、联动选择、选项卡焦点图
一.函数传参 1.函数传参:参数就是占位符----函数里定不下来的东西 var a1=function(){ alert(123); }; function a(f){ // 相当于 f=a1 ...
oclick vue 传参函数_详解Vue计算属性和侦听属性
关注[搜狐技术产品]公众号,第一时间获取技术干货作者介绍: 本期特邀作者:浪里行舟 Github博客2600 star作者,专注于前端领域.个人公众号:「前端工匠」,致力于打造适合初中级工程师能够快 ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...
面试官：请你说一说vuex的五个属性，分别是什么，区别和用途说一下
面试的时候,你有可能会被问到 vuex的五个属性,分别是什么,区别和用途说一下这个地方回答还是需要细思斟酌的如果随性回答,思路可能会混乱查了一下官网,关于vuex的五个属性还是有很多知识点的官 ...
vue2项目复习01-关闭elint检校，src文件别名，路由传参的对象写法，代理解决跨域问题，nprogress，vuex状态管理库，store的模块式开发，节流与防抖，编程式导航+事件委托路由跳转
1.关闭elint语法校验创建vue.config.js //关闭elint语法校验 {lintOnSave:false; } 2.src文件夹配置别名 jsconfig.json配置别名 @代表s ...

vuex五个属性及其使用传参

vuex五个属性及其使用传参相关推荐

最新文章

热门文章