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的加入爲大型化系統狀態管理，例如多頁面間同一數據源值引用保持同步提供了很好的解決方案。