溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
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.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 類，然后實例化導出。在你需要使用到的地方將這個 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 中查看源碼，思路也是非常巧妙的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
