Vuex4.0：全面看待狀態管理

一、初始認識

Vuex是一個專為Vue.js應用程序開發的狀態管理模式。Vuex通過利用Vue.js強大的雙向數據綁定機制，將組件狀態的讀取和分發放在一個全局Store中，從而方便了狀態的共享和管理，避免了組件之間亂傳參數或者累贅的事件通信。

Vuex主要由4個部分組成：State、Getter、Mutation與Action。在4.0中State獲取方式有了部分變動，將Getter內的返回值直接返回。

二、狀態管理上的新特性

1、Composition-Functions

export default {
  name: "App",
  setup() {
    const count = ref(0);
    return { 
      count, 
      increment() {
        count.value++;
      }
    }
  }
};

相對於Vue2.x+3.x的options-api，在Vue3.x及以上的版本實現了setup函數。其中使用的API就是CompositionAPI。CompositionAPI 是 Vue 的一個新功能，可以將組件邏輯提取到可重用的函數中，使組件更加易於閱讀和維護。

2、TypeScript支持

interface YourState {
    foo: string,
    bar: number
}

export default createStore({
  state() {
    return {
      foo: '',
      bar: 0
    }
  },
  mutations: {
    setFoo(state, payload: string) {
      state.foo = payload
    },
    setBar(state, payload: number) {
      state.bar = payload
    }
  }
});

在Vuex4.0中全面支持TypeScript，這可以讓開發者免受維護大型代碼時的痛苦。使用TypeScript不僅可以幫助檢測類型錯誤，還可以更好地組織代碼。

3、響應式模塊

import { reactive } from 'vue'

export default {
  state: reactive({
    name: 'John',
    age: 28,
    occupation: 'Web Developer'
  })
}

在Vuex4.0中，可以直接使用“reactive”函數來處理模塊狀態。這意味着我們不再需要顯式地將我們的位狀態處理為一個對象，從而簡化了我們的代碼。相比3.x版本中使用”computed”、”watch”可以更清晰的獲得當前的state。

三、使用Vuex4.0中的常見問題

1、在Nuxt.js中使用Vuex4.0

解決方法：

首先根據Nuxt.js高版本使用vue3，因此先安裝Vue3版本的Vuex4.0。

npm install vuex@next --save

接着在Nuxt.js的plugins目錄下新建一個vuex.js文件，初始化Vuex。

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {}
  }
})

export default store

在nuxt.config.js文件中加入如下代碼，實現全局引入剛剛初始化的Vuex。

export default {
  //....
  plugins: ['~/plugins/vuex.js']
}

2、在vite.js中使用Vuex4.0

解決方法：

在Vite.js中使用Vuex需要安裝插件。

npm install @vitejs/plugin-vue -D

接着在/src/main.js中使用如下代碼：

import { storeSymbol } from './store' // 引入定義的symbol
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(storeSymbol)                       // 注入store

app.mount('#app')

四、總結

通過了解Vuex4.0的新特性，我們不難發現，在代碼的可維護性及開發效率上，Vuex4.0有了很大的提升。主要表現在增加了對Composition-Functions、TypeScript、響應式模塊等新特性的支持，從而大大提高了開發者的開發體驗。同時，我們針對一些常見的問題，給出了解決方式，使大家在使用中可避免掉很多坑。相信隨着Vuex4.0的不斷完善，Vue.js的狀態管理也會變得更加方便，更加高效。