vue系列--60行代码实现一个简易版的Vuex

一个简单的Vuex实现

回忆一下vuex的一些使用方式,包括:

// $store的方式
this.$store.state.xxx
this.$store.getters.xxx
this.$store.commit('MutationName', data)
this.$store.dispatch('ActionName', data)

// map的方式
computed: {
  ...mapState(['StateName']),
  ...mapGetters(['GetterName'])
}

methods: {
  ...mapMutations(['MutationName']),
  ...mapActions(['ActionName'])
}

实现一个简单的vuex

  1. 写install方法,注册插件,引入Vue,并使用mixin在beforeCreate生命周期里给Vue的原型挂载对象
  2. 定义Store类,将传入的state使用Vue实现响应式
  3. 实现commit方法,即调用mutations的方法,使用响应式的state入参即可
  4. 实现dispatch方法,即调用并返回actions的方法,使用响应式的state入参即可
  5. 实现getters,利用Object.keys遍历传入的getters的key,再利用Object.defineProperty实现get方法
let Vue;

// install方法注册插件
function install(_Vue) {
  Vue = _Vue;

  Vue.mixin({
    beforeCreate() {
      if (this.$options.simplestore) {
        Vue.prototype.$simplestore = this.$options.simplestore;
      }
    }
  });
}

class Store {
  constructor(options) {
    this.state = new Vue({
      data: options.state
    });

    this.mutations = options.mutations;
    this.actions = options.actions;

    options.getters && this.initGetters(options.getters);
  }

  commit = (key, ...data) => {
    const fn = this.mutations[key];
    if (fn) {
      fn(this.state, ...data);
    }
  }

  dispatch = (key, ...data) => {
    const fn = this.actions[key];
    if (fn) {
      return fn({ commit: this.commit, state: this.state }, ...data);
    }
  }

  initGetters(getters) {
    this.getters = {};

    Object.keys(getters).forEach(key => {
      Object.defineProperty(this.getters, key, {
        get: () => {
          return getters[key](this.state);
        }
      })
    })
  }
}

export default {
  install,
  Store
}

源码在github,在src/simple-vuex/index.js,演示在/src/components/simple-vuex-demo.vue里

原文链接:segmentfault.com

上一篇:vue 插槽
下一篇:totop返回顶部

相关推荐

  • 骚操作!在react中使用vuex

    原文地址 前言 笔者最近在学习使用react,提到react就绕不过去redux。redux是一个状态管理架构,被广泛用于react项目中,但是redux并不是专为react而生,两者还需要react...

    2 年前
  • 页面刷新后,vuex中数据丢失、清空的解决方案 vuex-persistedstate

    场景之一 应用API进行用户身份验证,将登录状态保存为Vuex状态中的布尔值。 当用户登录时,设置了 登录状态 并相应地有条件地显示 登录/注销 按钮。 ​ 但是当刷新页面时,vue应用程序的状态将...

    1 年前
  • 速览vuex源码

    Vuex 源码不过千行,主要使用了 Store 类、ModuleCollection 类、Module 类,结构清晰,下面简单说说 Vuex 中一些主要的源码实现。推荐打开 Vuex 源码一同观看。

    5 个月前
  • 逐行粒度的vuex源码分析

    了解vuex 什么是vuex vuex是一个为vue进行统一状态管理的状态管理器,主要分为state, getters, mutations, actions几个部分, vue组件基于state进行...

    2 年前
  • 转行学前端的第 60 天 : 了解 BOM navigator 对象相关

    我是小又又,住在武汉,做了两年新媒体,准备用 6 个月时间转行前端。 今日学习目标 昨天基于搜索来基础学习 BOM location 对象 和 URL 接口。

    4 个月前
  • 跟我一起从0到1编写一个自己的Vuex

    前言 在前端工程化开发的今天,vuex、redux成为了我们项目中状态管理的上上之选。关于如何使用它,相信这已经成为前端开发者的必备技能之一了。今天,我们来一起尝试进阶一下,自己实现一个状态管理器来...

    8 个月前
  • 谈谈数据状态管理和实现一个简易版vuex

    本文在github做了收录 github.com/Michael-lzg… 掘金同文:https://juejin.im/post/6866964944634511368数据状态管理首先说说什么叫“...

    1 个月前
  • 记录vuex module 模块化分割

    参考官网例子,加深下vuex的学习。 随着项目的复杂度增大,为了方便管理vuex,一般会将其按功能分割成不同的模块,方便日后管理,先看下整体的目录结构: 目录结构 store里面暂时弄了common...

    2 年前
  • 解决uni-app使用vuex刷新后数据失效

    vuex的数据是可以响应式更新,但是刷新数据就会失效。 缓存的数据刷新后不会丢失,但是不会响应式更新。 所以可以利用二者优劣势相结合解决vuex刷新后数据丢失 思路: 在存vuex数据的时候顺便存进缓...

    1 年前
  • 解决Vuex存储数据之后,刷新页面数据消失

    解决方法如下 基本思路: 在刷新页面前对state根状态进行存储,在Vue实例再次被创建时以此替换state根状态。代码如下: created() { console.log(sessio...

    5 个月前

官方社区

扫码加入 JavaScript 社区