傻瓜式vuex語法糖kiss-vuex

時間 2019-12-10

標籤傻瓜 vuex 語法 kiss 简体版

原文原文鏈接

前言

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

看到這裏，若是你仍是不懂 vuex 是何物，或者你已經使用了 vuex 可是很不習慣它的用法，沒有關係，你能夠繼續閱讀本篇。實際上，在引入了 kiss-vuex 後，你甚至並不須要深入理解 vuex 就可以很好地使用它。html

若是有糖和白水，你會做何選擇？我會選擇把糖放入白水，味道更爲完美。vue

介紹

kiss-vuex 是一個很是簡單的語法糖類庫，遵循軟件工程裏的 KISS 原則，僅僅暴露一個方法：Store。壓縮版本僅僅只有 3KB，因此你能夠放心加入到你的代碼中。此處貼出幾個有用的連接：java

安裝和使用

經過 npm ：node

$ npm i kiss-vuex
複製代碼

注意：須要先行安裝 vue 和 vuex。git

在你的代碼中，能夠加入這樣一個 js 文件：github

// appStore.js
import { Store } from 'kiss-vuex';

@Store
class AppStore {
    counter = 0;
}

const appStore = new AppStore();

export { AppStore, appStore }
複製代碼

OK，一個 store 就聲明好了。What!? 這麼簡單嗎？對，就是這麼簡單。vuex

咱們對比下原始的 store 的聲明方式：typescript

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 }
複製代碼

怎麼樣，是否有很明顯的差異？npm

kiss-vuex 提供了一種極爲簡潔的聲明方式，經過 Store 裝飾器，你可以快速得到一個 Store 類，而後實例化導出。在你須要使用到的地方將這個 store 引入，加入到組件的 computed 屬性下。

貼一段使用示例代碼：

// hello.component.js
import 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.js
import { 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 中查看源碼，思路也是很是巧妙的。

Enjoy and have fun :)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。