为Vue添加简单的Store
前言
没错,我又来水文章了,Vue 的简单 Store 其实比 React 的简单 Store 更早就制作好了并已用在了XK-Editor@1.3.0上,只是没有写到博客上而已,这次正好写了 React 的简单 Store,顺便就把 Vue 的也补上。至于为什么要用 Store 或者为什么不用 Vuex,其实和 React 的差不多,这里就不说了,如果不了解可以移步上一篇 为 React 添加简单的 Store
分析
Vue 的简单 Store 和 React 的差不多,只是 React 改变 State 的叫 Reduce,Vue 叫 Mutation,同样简单 Store 并不需要这部分来增加代码的复杂性,在 Vue 的官方文档的状态管理中有说明如何创建一个简单的 Store,但是那个例子并不够完整,而且需要挂载到根节点 data 中,访问也过于复杂需要使用this.$root.shareState
冗长的访问方式,所以我们需要改进这部分来提高 Store 的实用性。参照 Vuex 的使用方式我们可以同 Vuex 一样添加mapState
和mapActions
来进行简单的调用,由于 Vue 提供了Vue.observable
的方法来创建响应式数据,所以我们就不需要将 Store 挂载到根组件,而是可以和组件分离独立的工作。
实现
首先,我们需要引入 Vue,同时初始化 State 和 Actions
_19import Vue from "vue";_19_19const state = Vue.observable({_19 count: 0_19});_19_19const actions = {_19 addCount() {_19 // 由于已经使用了Vue.observable来初始化State,所以这时的State已经拥有响应式,所以可以直接对其进行修改_19 state.count++;_19 }_19};_19_19const store = {_19 state,_19 actions_19};_19_19export default store;
然后我们需要编写对应的 map 方法,同时将 map 方法导出
_53export const mapState = (states) => {_53 let ret = {};_53 if (states instanceof Array) {_53 for (let i = 0; i < states.length; i++) {_53 ret[states[i]] = {_53 get() {_53 return store.state[states[i]];_53 },_53 set(value) {_53 store.state[states[i]] = value;_53 }_53 };_53 }_53 } else {_53 for (const key in states) {_53 if (states[key] instanceof Function) {_53 ret[key] = {_53 get() {_53 return states[key](store.state);_53 }_53 };_53 } else {_53 ret[key] = {_53 get() {_53 return store.state[states[key]];_53 },_53 set(value) {_53 store.state[states[key]] = value;_53 }_53 };_53 }_53 }_53 }_53 return ret;_53};_53_53export const mapActions = (actions) => {_53 let ret = {};_53 if (actions instanceof Array) {_53 for (let i = 0; i < actions.length; i++) {_53 ret[actions[i]] = store.actions[actions[i]];_53 }_53 } else {_53 for (const key in actions) {_53 if (actions[key] instanceof Function) {_53 ret[key] = actions[key](store.actions);_53 } else {_53 ret[key] = store.actions[actions[key]];_53 }_53 }_53 }_53 return ret;_53};
由于该 Store 制作较早,所以并没有考虑到添加打印 State 变动,如有需要可以参考 React 的方式添加 debug 输出。
那么,如何使用呢?
同 Vuex 的使用方式,在对应的组件中导入 Store 的 map 方法,然后就可以同 Vuex 一样对 State 和 Actions 进行操作了
_10import { mapState, mapActions } from "./store";_10_10export default {_10 computed: {_10 ...mapState(["count"])_10 },_10 methods: {_10 ...mapActions(["addCount"])_10 }_10};
为Vue添加简单的Store
https://blog.ixk.me/post/add-simple-store-for-vue许可协议
发布于
2019-12-03
本文作者
Otstar Lin
转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!