你不须要 vuex

对于 vuex 这个的争议，若是不是很高级的功能，我以为自行定义一个 class 做为数据管理会更加好，理由就是在 vscode 编辑器上面的代码追踪提示会很是有利于代码阅读和维护，并且数据庞大的时候能够拆分为各 class 时，代码追踪尤为重要，这个我也是从TS那边借鉴来的编程习惯。

写这篇文章的时候，我早就在2017年开始实际项目中使用 class 替代 Vuex 了，因此并不用担忧有其余问题，惟一要担忧的就是即将到来的 Vue3.0，若是数据层的赋值再也不是直接对等，而是像 react 中的 this.setState 这种方式去更新数据层的话，那这个方案就凉了。

先来看下如下代码

const a = {
    value: 10
}
const b = a;

b.value = 20;

console.log(a, b); // 输出 { value: 20 }, { value: 20 }
复制代码

先来讲下原理：由于JavaScript变量对等赋值的时候，指针指向同一个内存，因此依赖这个特性和 Vue 中赋值是直接对等，就能够自行定义一些全局的状态属性，依次注入到须要同步更新的组件中。废话很少说，直接看代码结构：

step 1 store.js: 自行定义一个 class 做为数据管理

class StoreModule{
    /** 订单页面列表数据 */
    order = {
        /** 订单日期 */
        date: '2018/12/12 12:12:12',
        /** 订单状态 */
        state: 1
    }
}

/** 全局数据 */
const Store = new StoreModule;

export default Store;
复制代码

step 2 goods.vue: 注意这里不要用 @/ 而是使用相对路径，否则vscode没法代码追踪提示

<script>
import Store from '../module/store';
export default {
    data () {
        return {
            // 页面实例化的时候获取数据
            pageData: Store.order
        }
    }
}
</script>
复制代码

step 3 list.vue 同时用到这个数据的组件

<script>
import Store from '../module/store';
export default {
    data () {
        return {
            // 页面实例化的时候获取数据
            listData: Store.order
        }
    },
    methods: {
        modifyState() {
            // 这里修改了，其余引用到 Store.order 全部组件都会同步修改
            this.listData.state = 2;
        }
    }
}
</script>
复制代码

以上这个就是基本的状态管理实现，说下我在项目中用到的状态监听处理：在 StoreModule 这个类里面使用 Object.defineProperty 或者 new Proxy，已经算是比较复杂的了。在 Vuex 中 State、Getter、Mutation、Action、Module这些方法平常只会用到前3种，但对于新手来讲，自定义的class做为状态管理更容易理解，并且扩展性也高。

最后对比优缺点，优势：代码编辑器（以vs code为例）静态代码追踪提示很是友好（Vuex没法实现，因此我才放弃使用），数据庞大时尤为明显，若是使用TS，配合 readonly、private、enum 等使用，可维护、阅读性简直再舒服不过。缺点：浏览器中调试插件没法使用状态追踪，不过有了静态代码分析检测（仅限TS），也不须要调试插件了。

有问题欢迎提出~

最后附上demo：vue-demo

博客地址：Hjs' blog