前言

vuex 作為 vue 框架狀態數據管理模塊，誕生已有些許年頭，它的出現很好地解決了兄弟組件響應式狀態數據通信的問題。但是，vuex 的學習是一定門檻的，同時其聲明和使用方式有一些不夠簡潔。一般情況下，我們會使用 new Vue({store})這種方式注入 Store，在組件中使用很 mapGetters 或 mapActions 等來引入 getters 和 actions 等，但隨著項目狀態數據增長，你會發覺越來越難以維護，因為這些數據和方法都太過分散。

看到這里，如果你還是不懂 vuex 是何物，或者你已經使用了 vuex 但是很不習慣它的用法，沒有關系，你可以繼續閱讀本篇。實際上，在引入了 kiss-vuex 后，你甚至并不需要深刻理解 vuex 就能夠很好地使用它。

如果有糖和白水，你會作何選擇？我會選擇把糖放入白水，味道更為完美。

介紹

kiss-vuex 是一個非常簡單的語法糖類庫，遵循軟件工程里的 KISS 原則，僅僅暴露一個方法：Store。壓縮版本僅僅只有 3KB，所以你可以放心加入到你的代碼中。此處貼出幾個有用的鏈接：

NPM
文檔·中文
Github

安裝和使用

通過 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+ 版本中，也會有類似的語法特性。