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

1、前言

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

复制代码

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

效果预览:

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

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

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

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

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

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

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

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

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

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

2、Vuex简介

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

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

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

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

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

3、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的加入为大型化系统状态管理，例如多页面间同一数据源值引用保持同步提供了很好的解决方案。