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的状态管理也会变得更加方便，更加高效。