TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 七、《Vuex使用》TypeScri

一、前言

在实际业务开发中，会遇到这样一种需求，使用VUE的页面需要支持SEO，同时对首屏有指标性要求，目前市面上普遍使用的是Nuxt.js解决方案，在引入的同时还需要考虑与现有的全栈工程结合，本系列文章探讨的是此类全栈工程的解决方案，同时使用的是TypeScript应用于前后端编程，文章中介绍的工程与技术要点源码已上传至Github，有需要的朋友可自行下载：
Nuxt.js和Nest.js同构工程

文章意在抛砖引玉，前后端使用同一种语言TypeScript编写，示例已包含基本接口请求，数据库连接应用，公用模块封装等实际开发中使用到的内容。

效果预览:

以下为该系列文章入口列表:
TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 一、《简介》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 二、《框架融合》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 三、《配置服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 四、《UI系统》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 五、《API服务设计》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 六、《SEO功能实现》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 七、《Vuex使用》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 八、《接入Mongo DB服务》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 九、《TypeScript》

TypeScript全栈工程实战-(Nuxt. js & Nest. js) - 十、《工程化部署》

二、Vuex简介

Vuex 为 Vue.js 应用程序状态管理模式,其采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

State:
Vuex中的数据源，需要保存的数据保存之处

Getters:
相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果。

Mutations:
修改store中的值唯一的方法。

Actions:
修改时提交一个actions，在actions中提交mutation再去修改状态值。

三、TypeScript VUEX使用

以示例中购物车数量增减为例:

实现效果
模块化

首先，在stroe目录index.ts注册模块级store引用
注册store实例，以便通过$vxm方式快捷引用

同时定义接口格式用于TS语法提示
mutation 定义store

定义store类并继承自VuexModule，TypeScript版本的Vuex处理类。这里的模块namespacedPath定义快捷访问方式。
通过@muattion注解的方式声明mutation
action
action同样以 @action()注解方式进行，请注意传入参数据据类型定义。
调用

以上代码片断描述了基本使用方式，可以看出基于TypeScript的改造只是加入了OOP及语法的差异化处理，总体来说还是遵循：
UI层事件通知Actions
Actions通知Moutations
最后再更新State
的模式来进行。
Vuex的加入为大型化系统状态管理，例如多页面间同一数据源值引用保持同步提供了很好的解决方案。