傻瓜式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 :)