众所周知，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实例上，这会丢失智能感知和拼写补全等。感谢大家阅读！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。