99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

前言

成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司10余年經(jīng)驗成就非凡，專業(yè)從事網(wǎng)站制作、網(wǎng)站設(shè)計，成都網(wǎng)頁設(shè)計，成都網(wǎng)頁制作，軟文發(fā)布平臺，廣告投放等。10余年來已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：028-86922220，我們期待您的來電！

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ā)覺越來越難以維護，因為這些數(shù)據(jù)和方法都太過分散。

看到這里，如果你還是不懂 vuex 是何物，或者你已經(jīng)使用了 vuex 但是很不習(xí)慣它的用法，沒有關(guān)系，你可以繼續(xù)閱讀本篇。實際上，在引入了 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 類，然后實例化導(dǎo)出。在你需要使用到的地方將這個 store 引入，加入到組件的 computed 屬性下。

貼一段使用示例代碼：

// hello.component.js
import Vue from 'vue';
import { appStore } from './AppStore';

export default Vue.component('app-hello', {
  template: 
    `

      
Click times: {{counter}}
      add counter
    
`,
  computed: {
    counter() {
      return appStore.counter;
    }
  },
  methods: {
    doClick() {
      appStore.counter++;
    }
  }
})

如果你有使用 Angular2+ 的經(jīng)驗，不難看出 kiss-vuex 里的 @Store 與 Angular 中的 @Service 十分類似。事實上，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ù)使用
作為裝飾器使用

額外配置

上述 @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)境，可以直接這么使用：

后記

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。