Vuex是干什么的？以及核心概念

Vuex是专门为Vue.js设计的状态管理模式。它采用集中式储存管理Vue应用中所有组件的状态
Vuex的核心概念：
. State --> 数据源存放地，类似vue组件中的data，在组件中通过store.state可以访问
. Getter --> 类似于vue组件中的计算属性，接受state作为第一个参数也接受其他的getter作为第二个参数，在组件中可以以访问state的方式访问store.getters，也可以使用mapGetters辅助函数 computed{ // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters([ 'doneTodosCount', ..... ]) }
. Mutation --> 更改Vuex中State的唯一方法就是提交一个Mutation，非常类似于事件，每个mutation都有一个事件类型和一个回调函数，这个回调函数实际就是我们进行状态更改的地方，接受state作为第一个参数，注意mutation必须是同步函数mutations:{ increment (state,payload){ state.count += payload.amount } }
触发时传入额外的参数：store.commit('increment ', { amount: 10 }) 或者 store.commit({ type: increment , amount: 10 })
在组件中提交mutationsimport { mapMutations } from 'vuex'
methods: { ... mapMutations ([ 'increment' // 将 this.increment()映射为 this.$store.commit('increment') ]) }
. Action --> action类似于mutation，但是不同的是action提交的是mutation，而不是直接的去改变状态，action可以包含任意的异步操作，接受一个与store相同方法和属性的context对象
actions: { incrementAsync({ commit }) { commit('increment') } } 或者 actions: { incrementAsync(context) { context.commit('increment') } }
actions通过store.dispatch('incrementAsync')方法触发，或者传递额外参数 store.dispatch(‘incrementAsync’, payload) 或者 store.dispatch({ type: 'incrementAsync', amount: 10 })
在组件中触发action： methods: { ...mapActions(['incrementAsync' // 将 this.incrementAsync() 映射为 this.$store.dispatch('incrementAsync')]) }
. Module–> 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

Vuex是干什么的？以及核心概念相关推荐

vuex是干什么的？
1.vuex是干什么的? 学习任何东西,必然绕不过去的一个话题,就是我们为什么要使用它,它解决了什么问题? vuex是基于vue框架的一个状态管理库.可以管理复杂应用的数据状态,比如兄弟组件的通信.多 ...
【vue2.0进阶】轻松理解Vuex的3个核心概念
上一节前端君和大家一起认识了Vuex,我们了解了Vuex是一个提供状态管理机制,相比使用传统的全局对象,它有两大优点,一个是它的状态存储是响应式的,另一个是要不能随意修改Vuex的状态,必须按照它的规 ...
Vuex的State核心概念
Vuex的State核心概念 State提供唯一的公共数据源,所有共享的数据都要统一放到Store的 State中进行存储. //创建store数据源,提供唯一公共数据 const store = n ...
VueX核心概念与详细实例
目录标题一.什么是Vuex? 二.Vuex的五个核心概念三.核心概念及实例详解 1. State 代码示例 2. Getters 代码示例 3. Mutations 代码示例 4. Actions ...
Vuex的五个核心概念
Vuex是什么? VueX 是一个专门为 Vue.js 应用设计的状态(就是需要共享的数据)管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vu ...
Vuex的作用、使用、核心概念(State、Mutations、Getters、Actions、Modules)、文件抽离
vue入门–基础命令+axios+案例练习 vue入门–vue常用属性.生命周期.计算属性.过滤器.组件.虚拟DOM.数组的响应式方法.页面闪烁.ES6简单语法增强 vue入门–js高阶函数(箭头函数 ...
【vue2.0进阶】轻松理解Vuex的3个核心概念及简单应用案例(计算器)
Vuex是一个提供状态管理机制,相比使用传统的全局对象,它有两大优点,一个是它的状态存储是响应式的,另一个是要不能随意修改Vuex的状态,必须按照它的规矩来办事.最后也了解了它有适用和不适用的业务场景 ...
Redux相关知识（什么是redux、redux的工作原理、redux的核心概念、redux的基本使用）(十一)
系列文章目录第一章:React基础知识(React基本使用.JSX语法.React模块化与组件化)(一) 第二章:React基础知识(组件实例三大核心属性state.props.refs)(二) 第 ...
2021年大数据ELK（五）：Elasticsearch中的核心概念
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录系列历史文章 Elasticsearch中的核心概念一.索引 index 二 ...

Vuex是干什么的？以及核心概念

Vuex是干什么的？以及核心概念

Vuex是干什么的？以及核心概念相关推荐

最新文章

热门文章