在Vuejs项目中，我为什么不再使用Vuex管理全局状态?

众所周知，vuex是Vuejs项目中非常常用的状态管理库，而且是官方出品。其实，vuex的设计存在一个小小的缺陷，就是开发工具难以提供智能感知，有些很长的名字，我们必须记住它，或者干脆复制粘贴。这对JS这种弱类型语言来说，不是很好的体验，可以说这个体验很糟糕。所以我决定，在我所有较新的Vuejs项目中，逐步移除掉vuex；而新项目中则不再使用vuex；

在Vuejs2.x中，我们使用Vue.observable创建状态，observable是一个可观察对象，当通过它创建的对象属性发生改变后，会触发视图的更新。示例代码如下：

/** 状态 */
export const state = Vue.observable({
  /** 消息列表 */
  notices: [],
})

在Vuejs3.x中，我们使用reactive创建状态，reactive是一个响应式对象，大家可以认为它是类似于Vuejs2.x中observable的对象，示例代码如下：

import { reactive } from 'vue'
/** 状态 */
export const state = reactive({
  /** 通知列表 */
  messages: [],
})

现在，我们实现了类似vuex中state的东西，那么，有时候我们也许需要用到getters，事实上，getters的定义也非常简单，我们使用es5的原生get声明。示例代码如下：

export const getters = {
  /** 未读消息数 */
  get unreadMessageCount () {
    return state.messages.filter(_ => !_.stateRead).length
  }
}

是不是很简单？现在我们定义获取消息列表的函数，这非常简单，示例代码如下：

/**
 * 获取消息列表
 * @returns {Promise<any[]>}
 */
export const getMessages = async () => {
  state.messages = (await request('/base/message/my/message/list')).data
}

这就是我们状态模块的主要构成部分：state，getters，actions；我们所用的文件名叫：store.js，最终，我们在公共模块common/index.js中将store.js中的所有标识符作为store变量导出，代码如下：

export * as store from './lib/store'

common/index.js模块还有更多的导出，我们所有的公用标识符都通过该模块使用，其它部分导出代码如下：

export * from './lib/consts'
export * from './lib/modal'
export * from './lib/utils'
export * from './lib/tree'
export * from './lib/axios'
export * from './lib/route-utils'
export { default as eventBus } from './lib/event-bus'
export { default as vuePlugins } from './lib/vue-plugins'
export { default as wsSubscribe } from './lib/ws-subscribe'

现在，我们可以使用store了。我们这里以Vuejs3.x为例，Vue2.x写法不一样，大家应该都能理解；首先从common/index.js引入store，我们创建了变量unreadCount用于在模板中使用。大家可以忽略和本篇文章无关的代码，示例代码如下：

<template>
  <header :class="cls">
    <div :class="`${cls}_right`">
      <el-badge :value="unreadCount" :hidden="!unreadCount">
        <el-link :icon="ChatRound" :underline="false" @click="goMyMessages" />
      </el-badge>
    </div>
  </header>
</template>

<script setup>
import { computed } from 'vue'
import { store } from '../../common'

const unreadCount = computed(() => store.state.unreadMessageCount)
</script>

现在，我们的开发工具对store及unreadCount是有智能感知的，当我们的鼠标指针引入unreadCount的时候，会提示出它的数据类型及描述，我们在编写的时候也能获得代码补全，避免拼写错误及提高开发效率。

这就是本篇文章给大家分享的内容，希望大家都能理解！最后，我想再补充一句，如果你不在意开发工具的智能感知和拼写补全，vuex也许适合你。我个人也不建议为了减少引入将store添加到Vue原型链或App实例上，这会丢失智能感知和拼写补全等。感谢大家阅读！