简单的vuex实现

CodeTrailblazerX
• 阅读 974

实现一个vuex插件
pvuex 初始化: Store声明、install实现,vuex.js:

let Vue;
// 定义install方法 完成赋值与注册
function install(_Vue) {
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      if (this.$options.store) {
        Vue.prototype.$store = this.$options.store;
      }
    }
  });
}
// 定义sotre类,管理响应式状态 state
class Store {
  constructor(options = {}) {
    this._vm = new Vue({
      data: {
        $$state:options.state
      }
    }); 
  }
  get state() {
    return this._vm._data.$$state
  }
  set state(v) {
    return v
  } 
}
function install(_Vue) {
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      if (this.$options.store) {
        Vue.prototype.$store = this.$options.store;
      }    
    }
  }); 
}

 
export default { Store, install };

实现 commit :根据用户传入type获取并执行对应 mutation

 
// class Store...
  constructor(options = {}) {
    // 保存用户配置的mutations选项
    this._mutations = options.mutations || {}
  }
  commit(type, payload) {
    // 获取对应的mutation
    const entry = this._mutations[type]
    // 传递state给mutation 
    entry && entry(this.state, payload);
  } 

实现 actions :根据用户传入type获取并执行对应 action

constructor(options = {}) {
    this._actions = options.actions || {}

    const store = this
    const {commit, action} = store
    // 将上下文指定为sotre实例
    this.commit = this.commit.bind(this)
    this.dispatch = this.dispatch.bind(this)
}
dispatch(type, payload) {
    // 获取对应的action
    const entry = this._actions[type]
 
    return entry && entry(this, payload);
}

实现 getters , 并利用computed属性缓存.

// class Store

 const store = this
 const computed = {}
 Object.keys(this._getters).forEach(key => {
     computed[key] = function(){
        store._getters[key](store.state)
    }    
    Object.defineProperty(this.getters, key, {
        get(){
            return store._vm[key]
        },
        set(v){
            console.log(v)
        }
    })
 });
 this._vm = new Vue({
     data: {
         $$state:options.state
     },
     computed
 });     
点赞
收藏
评论区
推荐文章
Chase620 Chase620
4年前
vue: 解决vuex页面刷新数据丢失问题
一、问题描述1、一般在登录成功的时候需要把用户信息,菜单信息放置vuex中,作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被清空。2、我在一个组件(例如登录组件页面)中登录了后,其它页面要怎
Dax Dax
4年前
veux的使用
1)说说什么是vuex(下定义)2)vuex解决了哪些问题,为什么要用(必要性)3)怎么使用vuex(使用方法)4)描述vuex原理,提升答案深度(深层原理升华答案)vuex的流程图分析:我们可以看到图中虚线框包裹起来的部分就是vuex的三个组成部分(Action,Mutations,state),我们来简单的捋一下整个流程:首先vue的组件在响应用户行为交
Easter79 Easter79
3年前
Vue CLI 3搭建vue+vuex 最全分析
一、介绍VueCLI是一个基于Vue.js进行快速开发的完整系统。有三个组件:CLI:@vue/cli 全局安装的npm包,提供了终端里的vue命令(如:vuecreate、vueserve、vueui等命令)CLI服务:@vue/cliservice是一个开发环境依赖。构建于 we
Chase620 Chase620
4年前
记录Vue项目实现axios请求头带上token
在vue项目中首先npm命令安装axios:npminstallaxiosSaxios的封装使用请求带上token,token通过登录获取存在vuex,为防止刷新丢失token使用持久化vuexpersistedstate插件保存数据npmiSvuexpersistedstateimportpersistedStat
Souleigh ✨ Souleigh ✨
4年前
Vuex 4 正式发布:打包现在与 Vue 3 一致
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。Vuex采用集中式存储管理应用的所有组件组件的状态。换句话说,Vuex就是帮开发者存储多个组件共享的数据,方便开发者对其读取的更改的工具。Vuex4正式版本现已发布。Vuex4的改进重点是兼容性。Vuex4支持Vue3,并提供了与Vuex3完全相同的
九路 九路
4年前
通过一个简单实例了解vuex
简单说明什么是vuex,vuex怎么使用,什么场景下适合使用vuex,vuex文档(https://links.jianshu.com/go?tohttps%3A%2F%2Fvuex.vuejs.org%2Fzh%2F)中都有介绍。看完文档之后,都知道vuex的核心有State、Getter、Mutation、Action、Modul
可莉 可莉
4年前
了解Vuex状态管理模式
1Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢?vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
佛系码 佛系码
4年前
Vue3现状报告及未来规划
近况158万周活跃用户(通过devtools插件来统计),940万的月下载量。对比去年Devtools:110万158万(43.6%)NPM:620万940万(51.6%)Vue3.0OnePiece自那之后,Vue3逐渐趋于稳定,继续探索用户体验。VueRouter4.0已经稳定。Vuex4.0已经稳定。生态慢慢
Carl195 Carl195
4年前
Vue开发指南:你都需要学点啥?
如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。另外您可能还经常听到和Vue一起提到的工具和库,如Vuex、Webpack、VueCLI和Nuxt。也许您在面对这些未知的术语和
徐小夕 徐小夕
4年前
vue高级进阶系列——用typescript玩转vue和vuex
       用过vue的朋友大概对vuex也不陌生,vuex的官方解释是专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。说的简单点就是对vue的状态进行统一管理,如下图介绍了其管理模式:im
CodeTrailblazerX
CodeTrailblazerX
Lv1
岁月,造就了厚重的历史,驱走了英雄的风流。
文章
4
粉丝
0
获赞
0