你不須要 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