VSlim
VSlim是基于Slim的Vue状态管理拓展库，与其拥有同样的特性，并且还支持State的响应式哦
注意
因为VSlim是基于Slim的拓展，所以请在学习VSlim内容之前务必先学习Slim相关内容以免下列内容的核心概念不理解！
特点
- 小巧精致
- 增强数据劫持能力
- 使用便捷
除此之外，VSlim的Store是通过跟组件的data属性注入，通过Vue的数据劫持实现数据的双向绑定。
基于Slim开发，包含其核心功能并在此基础上弥补了一些Vue数据监听上的不足，例如对象设置新key和数组增加新下标值操作都得用VueComponent.$set去绑定新值实现劫持。
在VSlim里面无需担心新增数据导致的劫持遗漏。
VSlim提供了非常方便的注入方式mapState、mapDispatchers和mapGetters快速的在任意组件中注入State，Dispatcher和Getter
安装
标签引入
<script src="https://unpkg.com/vslim/dist/vslim.min.js"></script>
NPM
npm install vslim
快速开始
App.js
import Vue from 'vue'
import App from './App.vue'
import VSlim from 'vslim'
Vue.use(VSlim);
let state = {
count: 0
};
const reducers = {
increment: (state) => {
state.count++;
},
decrement: (state) => {
state.count--
}
}
const getters = {
evenOrOdd: (state) => {
return state.count % 2 === 0 ? 'Even' : 'Odd'
}
}
let store = VSlim.createStore({
reducers, state, getters
});
// 在Vue初始化的时候传入store
new Vue({
el: '#app',
store,
render: h => h(App)
})
App.vue：
提示
通过VSlim提供的mapDispatchers、mapGetters和 mapState方法将Store中的Dispatcher、Getter和State注入到组件直接使用，或者通过this.store来获取到全局store对象
<template>
<div id="app">
<div class="btn" @click="decrement">-</div>
<div id="count">Clicked: <span class="tag">{{ count }}</span> times, count is <span class="tag">{{ evenOrOdd }}</span>.</div>
<!--或者通过 this.store.state.count 来访问count状态-->
<div class="btn" @click="increment">+</div>
<!--或者你可以这样触发 this.store.commit('increment') 来触发reducer-->
</div>
</template>
<script>
import {mapDispatchers, mapGetters, mapState} from 'vslim'
export default {
methods: {
...mapDispatchers([
'increment',
'decrement'
])
},
computed: {
...mapState([
'count'
]),
...mapGetters([
'evenOrOdd'
])
},
watch: {
'count': {
handler(val) {
console.log('new count: ' + val)
}
}
}
}
</script>
<style scoped></style>
mapState
mapState是将State注入到组件的计算属性中，通过this.stateKey的方式直接读取，增强了使用的便捷性，使用方法很简单，只需要在方法中传入一个数组，
数组中包含需要注入的stateKey
<template>
<div>{{count}}</div>
</template>
<script>
import {mapState} from 'vslim'
export default {
computed: {
...mapState([
'count'
])
}
}
</script>
mapGetters
mapGetters是将Getter注入到组件的计算属性中，通过this.getterKey的方式直接读取，注册方式和mapState一样，传入数组
数组中包含需要注入的getterKey
注意
VSlim推荐用注入的方式去使用getter
<template>
<div>{{evenOrOdd}}</div>
</template>
<script>
import {mapGetters} from 'vslim'
export default {
computed: {
...mapGetters([
'evenOrOdd'
])
}
}
</script>
mapDispatchers
mapGetters是以store.commit(actionKey)的方式注入到组件的methods中，并转换为this.actionKey()去调用，无需再传入actionType，大大的简化了操作
<template>
<div id="app">
<div class="btn" @click="decrement">-</div>
<div class="btn" @click="increment">+</div>
</div>
</template>
<script>
import {mapDispatchers} from 'vslim'
export default {
methods: {
...mapDispatchers([
'increment',
'decrement'
])
}
}
</script>