Vuex中的核心方法

Vuex是一个专为Vue.js应用程序开发的状态管理模式，其采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。每一个Vuex应用的核心就是store仓库，store基本上就是一个容器，它包含着你的应用中大部分的状态state。

描述

在大量的业务场景下，不同的模块组件之间确实需要共享数据，也需要对其进行修改操作。也就引发软件设计中的矛盾：模块组件之间需要共享数据和数据可能被任意修改导致不可预料的结果。为了解决其矛盾，软件设计上就提出了一种设计和架构思想，将全局状态进行统一的管理，并且需要获取、修改等操作必须按我设计的套路来，就好比马路上必须遵守的交通规则，右行斑马线就是只能右转一个道理，统一了对全局状态管理的唯一入口，使代码结构清晰、更利于维护。状态管理模式从软件设计的角度，就是以一种统一的约定和准则，对全局共享状态数据进行管理和操作的设计理念。你必须按照这种设计理念和架构来对你项目里共享状态数据进行CRUD，所以所谓的状态管理模式就是软件设计的一种架构模式。
关于Vuex的五个核心概念，在这里可以简单地进行总结：

state: 基本数据。
getters: 从基本数据派生的数据。
mutations: 提交更改数据的方法，同步操作。
actions: 像一个装饰器，包裹mutations，使之可以异步。
modules: 模块化Vuex。

State

单一状态树

Vuex使用单一状态树，即用一个对象就包含了全部的状态数据，state作为构造器选项，定义了所有我们需要的基本状态参数，也就是说state便是唯一数据源SSOT，同样每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。此外单状态树和模块化并不冲突，我们仍然可以将状态和状态变更事件分布到各个子模块中。

在Vue组件中获得Vuex状态

从store实例中读取状态最简单的方法就是在计算属性中返回某个状态，由于Vuex的状态存储是响应式的，所以在这里每当store.state.count变化的时候，都会重新求取计算属性，进行响应式更新。

const store = new Vuex.Store({state: {count: 0}
})
const vm = new Vue({//..store,computed: {count: function(){return this.$store.state.count}},//..
})

mapState辅助函数

mapState函数返回的是一个对象，当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余，为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性。

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from "vuex";export default {// ...computed: mapState({// 箭头函数count: state => state.count,// 传字符串参数 count 等同于 state => state.countcountAlias: 'count',// 使用 thiscountPlusLocalState: function(state) {return state.count + this.localCount;}})// ...
}

如果当前组件中还有局部计算属性需要定义，通常可以使用对象展开运算符...将此对象混入到外部对象中。

import { mapState } from "vuex";export default {// ...computed: {localComputed: function() { /* ... */ },// 使用对象展开运算符将此对象混入到外部对象中...mapState({// ...})// ...
}

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://vuex.vuejs.org/zh/
https://www.jianshu.com/p/1fdf9518cbdf
https://www.jianshu.com/p/29467543f77a
https://juejin.cn/post/6844903624137523213
https://segmentfault.com/a/1190000024371223
https://github.com/Hibop/Hibop.github.io/issues/45

Vuex和普通全局对象相关推荐

JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释，全局对象，隐含的全局概念...
JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念 <html><body><script type="tex ...
Node.js 全局对象
Node.js 全局对象在浏览器 JavaScript 中,通常 window 是全局对象, 而 Node.js 中的全局对象是 global,所有全局变量(除了 global 本身以外)都是 gl ...
NodeJS API Process全局对象
Process 全局对象,可以在代码中的任何位置访问此对象,使用process对象可以截获进程的异常.退出等事件,也可以获取进程的当前目录.环境变量.内存占用等信息,还可以执行进程退出.工作目录切换等 ...
C++对象模型8——构造函数和析构函数中对虚函数的调用、全局对象构造和析构、局部static数组的内存分配
一.构造函数和析构函数中对虚函数的调用仍然以https://blog.csdn.net/Master_Cui/article/details/109957302中的代码为例 base3构造函数和析构 ...
Node.js：get/post请求、全局对象、工具模块
一.GET/POST请求在很多场景中,我们的服务器都需要跟用户的浏览器打交道,如表单提交.表单提交到服务器一般都使用 GET/POST 请求. 1.获取GET请求内容由于GET请求直接被嵌入在路径 ...
JS 全局对象全局变量作用域（改自TOM大叔博文）
JavaScript通过函数管理作用域. 局部变量:在函数内部声明的变量是局部变量,只能在这个函数内部使用,函数外部不可用. 全局变量:在任何函数外面声明的变量:或是未经声明在函数内部直接简单使用的变 ...
nodejs 全局变量和全局对象
1.全局对象所有模块都可以调用 1)global:表示Node所在的全局环境,类似于浏览器中的window对象. 2)process:指向Node内置的process模块,允许开发者与当前进程互动. ...
C++之全局对象、局部对象、静态对象详解
1．对于全局对象,程序一开始,其构造函数就先被执行(比程序进入点更早):程序即将结束前其析构函数将被执行. 2．对于局部对象,当对象诞生时,其构造函数被执行:当程序流程将离开该对象的声明周期时,其 ...
30.Node.js 全局对象
转自:http://www.runoob.com/nodejs/nodejs-module-system.html 学习要点: - __filename - __dirname - setTim ...

Vuex和普通全局对象