Vuex的核心概念state

文章目录

Mutation
- 调用Mutation函数的方式
- - 第一种：this.$store.commit
  - 第二种

Mutation

不允许组件直接更改Store中的数据，可以使用Mutation变更Store中的数据

Mutation用于变更Store中的数据。

只能通过mutation变更Store数据，不可以直接操作 Store 中的数据。
通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化

// 定义 Mutation
const store = new vuex.store({state: {count: 0},mutations: {add (state) {//变更状态state.count++}}
})

// 触发mutation
methods: {handle1() {//触发mutations的第一种方式this.$store.commit ( 'add ' )}
}

可以在触发mutations 时传递参数:

//定义Mutation
const store = new vuex.store({state: {count: 0,},mutations: {addN (state, step){//变更状态state.count += step}}
})

调用Mutation函数的方式

第一种：this.$store.commit

// 触发mutation
methods: {handle1() {//触发mutations的第一种方式this.$store.commit ( 'add ' )}
}

可以在触发mutations 时传递参数:

//定义Mutation
const store = new vuex.store({state: {count: 0,},mutations: {addN (state, step){//变更状态state.count += step}}
})

第二种

this.$store.commit()是触发mutations的第一种方式，触发mutations的第二种方式:

// 1．从vuex中按需导入mapMutations函数
import ( mapMutations ] from 'vuex'

通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法:

// 2．将指定的 mutations函数，映射为当前组件的methods函数
methods : {...mapMutations ( [ 'add' , ' addN ' ])}

Vuex的核心概念state相关推荐

Vuex的作用、使用、核心概念(State、Mutations、Getters、Actions、Modules)、文件抽离
vue入门–基础命令+axios+案例练习 vue入门–vue常用属性.生命周期.计算属性.过滤器.组件.虚拟DOM.数组的响应式方法.页面闪烁.ES6简单语法增强 vue入门–js高阶函数(箭头函数 ...
Vuex的核心概念 Action
Action Action 用于处理异步任务. 如果通过异步操作变更数据,必须通过Action,而不能使用Mutations,但是在Action 中还是要通过触发Mutation的方式间接变更数据. ...
Vuex的State核心概念
Vuex的State核心概念 State提供唯一的公共数据源,所有共享的数据都要统一放到Store的 State中进行存储. //创建store数据源,提供唯一公共数据 const store = n ...
Vuex是干什么的？以及核心概念
Vuex是干什么的?以及核心概念 Vuex是专门为Vue.js设计的状态管理模式.它采用集中式储存管理Vue应用中所有组件的状态 Vuex的核心概念: . State --> 数据源存放地 ,类 ...
VueX核心概念与详细实例
目录标题一.什么是Vuex? 二.Vuex的五个核心概念三.核心概念及实例详解 1. State 代码示例 2. Getters 代码示例 3. Mutations 代码示例 4. Actions ...
2-快速攻破vuex五大核心-附案例源码
文章目录 1. 核心概念 2. state 2.1 单一状态树 2.2 在 Vue 组件中获得 Vuex 状态 2.3 state 的创建 2.4 在组件中使用 store 2.5 store 配置 ...
【vue2.0进阶】轻松理解Vuex的3个核心概念
上一节前端君和大家一起认识了Vuex,我们了解了Vuex是一个提供状态管理机制,相比使用传统的全局对象,它有两大优点,一个是它的状态存储是响应式的,另一个是要不能随意修改Vuex的状态,必须按照它的规 ...
Vuex的五个核心概念
Vuex是什么? VueX 是一个专门为 Vue.js 应用设计的状态(就是需要共享的数据)管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vu ...
【vue2.0进阶】轻松理解Vuex的3个核心概念及简单应用案例(计算器)
Vuex是一个提供状态管理机制,相比使用传统的全局对象,它有两大优点,一个是它的状态存储是响应式的,另一个是要不能随意修改Vuex的状态,必须按照它的规矩来办事.最后也了解了它有适用和不适用的业务场景 ...