快捷導(dǎo)航

傻瓜式vuex語法糖kiss-vuex整理

更新時間：2018年12月21日 15:08:02 作者：風(fēng)起云涌Hal

kiss-vuex 是一個非常簡單的語法糖類庫，這篇文章主要介紹了傻瓜式vuex語法糖kiss-vuex整理，非常具有實(shí)用價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

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

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

介紹

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

NPM
文檔·中文
 Github

安裝和使用

通過 npm ：

$ npm i kiss-vuex

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

在你的代碼中，可以加入這樣一個 js 文件：

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

@Store
class 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 類，然后實(shí)例化導(dǎo)出。在你需要使用到的地方將這個 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+ 的經(jīng)驗(yàn)，不難看出 kiss-vuex 里的 @Store 與 Angular 中的 @Service 十分類似。事實(shí)上，kiss-vuex 正是借鑒了這種模式，在未來的 vue3.0+ 版本中，也會有類似的語法特性。

當(dāng)然，你依然可以使用函數(shù)調(diào)用的方式來聲明 store：

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

// @Store
// class AppStore {
//   counter = 0;
// }

const appStore = Store({
  counter: 0
});

export { appStore }

引入的話就和上述示例中一樣了。

另外，還有幾個線上實(shí)例可供參考：

作為普通函數(shù)使用
 作為裝飾器使用

額外配置

上述 @Store 這種使用方式是基于 es 中的裝飾器語法以及類屬性語法，而目前裝飾器和類屬性都處于草案狀態(tài)，所以需要讓你的開發(fā)環(huán)境支持這些語法特性，你需要做一些額外配置。

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 這個屬性值設(shè)置為 true。

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

es5

如果你偏愛 es5 環(huán)境，可以直接這么使用：

<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 相關(guān)代碼量，并提倡“先引入后使用”這種模式，能夠很方便地進(jìn)行維護(hù)和定位問題。有興趣的同學(xué)可以自行去 github 中查看源碼，思路也是非常巧妙的。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: