前言
vuex 作為 vue 框架狀態數據管理模塊，誕生已有些許年頭，它的出現很好地解決了兄弟組件響應式狀態數據通信的問題。但是，vuex 的學習是一定門檻的，同時其聲明和使用方式有一些不夠簡潔。一般情況下，我們會使用 new Vue({store})這種方式注入 Store，在組件中使用很 mapGetters 或 mapActions 等來引入 getters 和 actions 等，但隨著項目狀態數據增長，你會發覺越來越難以維護，因為這些數據和方法都太過分散。
看到這里，如果你還是不懂 vuex 是何物，或者你已經使用了 vuex 但是很不習慣它的用法，沒有關系，你可以繼續閱讀本篇。實際上，在引入了 kiss-vuex 后，你甚至并不需要深刻理解 vuex 就能夠很好地使用它。
如果有糖和白水，你會作何選擇？我會選擇把糖放入白水，味道更為完美。
介紹
kiss-vuex 是一個非常簡單的語法糖類庫，遵循軟件工程里的 KISS 原則，僅僅暴露一個方法：Store。壓縮版本僅僅只有 3KB，所以你可以放心加入到你的代碼中。此處貼出幾個有用的鏈接：
安裝和使用
通過 npm ：
$ npm i kiss-vuex
注意：需要先行安裝 vue 和 vuex。
在你的代碼中，可以加入這樣一個 js 文件：
// appStore.jsimport { Store } from 'kiss-vuex';@Storeclass AppStore { counter = 0;}const appStore = new AppStore();export { AppStore, appStore }OK，一個 store 就聲明好了。What!? 這么簡單嗎？對，就是這么簡單。
我們對比下原始的 store 的聲明方式：
import Vuex from 'vuex';const appStore = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } }});export { appStore }怎么樣，是否有很明顯的差別？
kiss-vuex 提供了一種極為簡潔的聲明方式，通過 Store 裝飾器，你能夠快速獲得一個 Store 類，然后實例化導出。在你需要使用到的地方將這個 store 引入，加入到組件的 computed 屬性下。
貼一段使用示例代碼：
// hello.component.jsimport Vue from 'vue';import { appStore } from './AppStore';export default Vue.component('app-hello', { template: `<div> <p>Click times: {{counter}}</p> <button @click="doClick()">add counter</button> </div>`, computed: { counter() { return appStore.counter; } }, methods: { doClick() { appStore.counter++; } }})如果你有使用 Angular2+ 的經驗，不難看出 kiss-vuex 里的 @Store 與 Angular 中的 @Service 十分類似。事實上，kiss-vuex 正是借鑒了這種模式，在未來的 vue3.0+ 版本中，也會有類似的語法特性。
當然，你依然可以使用函數調用的方式來聲明 store：
// appStore.jsimport { Store } from 'kiss-vuex';// @Store// class AppStore {// counter = 0;// }const appStore = Store({ counter: 0});export { appStore }引入的話就和上述示例中一樣了。
另外，還有幾個線上實例可供參考：
額外配置
上述 @Store 這種使用方式是基于 es 中的裝飾器語法以及類屬性語法，而目前裝飾器和類屬性都處于草案狀態，所以需要讓你的開發環境支持這些語法特性，你需要做一些額外配置。
babel
如果你使用了 babel，需要安裝 @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties 兩個插件：
$ npm i -D @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties
并配置到 babel.config.js 中：
module.exports = { plugins: [ ["@babel/plugin-proposal-decorators", { legacy: true }], ["@babel/plugin-proposal-class-properties", { loose: false }] ], presets: [ [ "@babel/env", { modules: false } ] ]};typescript
如果你使用了 typescript，需要將 tsconfig.json 中的 compilerOptions.experimentalDecorators 這個屬性值設置為 true。
{ "compilerOptions": { "experimentalDecorators": true }}es5
如果你偏愛 es5 環境，可以直接這么使用：
<body> <script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script> <script type="text/javascript" src="./node_modules/vuex/dist/vuex.min.js"></script> <script type="text/javascript" src="./node_modules/vuex/dist/kiss-vuex.min.js"></script> <script type="text/javascript"> var appStore = KissVuex.Store({ counter: 0 }); // 添加你的其余自定義代碼 </script></body>后記
使用 kiss-vuex 能夠大大減少 store 相關代碼量，并提倡“先引入后使用”這種模式，能夠很方便地進行維護和定位問題。有興趣的同學可以自行去 github 中查看源碼，思路也是非常巧妙的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
