实现一个vuex

最新推荐文章于 2022-07-17 11:03:13 发布
最新推荐文章于 2022-07-17 11:03:13 发布
阅读量214 收藏
点赞数
分类专栏： Vue原理 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gogogocj/article/details/121052762
版权

实现一个vuex

设计理念：

  • 集中式管理
  • 状态可预测
    在这里插入图片描述

之所以的可预测的：是因为这个就是一个单向数据流，不管是直接进程commit还是通过异步的action来进行修改，最后都要通过commit给mutation然后再对state里面的数据进行变化的，所以我们就可以在这个commit的过程中，实现一些 拦截、监听器、中间件，这样就可以预测状态的改变监听状态的改变了

这个就是状态可预测的原因了

之所以把state修改了，组件中使用了这个vuex里面的数据也会改变是因为，把state里面的数据声明为了响应式的，所以通过mutation修改state之后，数据的依赖就会重新执行render方法，这样就可以进行修改state然后依赖也会改变了，这样就可以得到一个虚拟DOM，然后就和真实DOM进行diff比较，再进行DOM树修改即可重新进行渲染了

我们先把vuex整合进来

vue add vuex

之后在项目目录中就会出现一个 store/index.js 文件了

在这里插入图片描述

可以看到

Vue.use(Vuex)

所以就猜测和vue-router一样

在Vue.use里面是进行了一个this.$store挂载操作

就可以通过 this.$store.state.xxx 来访问到下面通过new Vuex.store({}) 新建的vuex实例了

需要做的：

  • state声明为响应式数据
  • commit和mutations中的方法有关
  • dispatch和actions中的方法有关

其实还有一个getter

另外一个疑问点：

  mutations: {
    add(state) {
      
    }
  },

mutation中方法的第一个参数，state是怎么来的？

下面是一个基本的使用：

<template>
  <div id="app">
    <h1>{{$store.state.counter}}</h1>
    <button @click="$store.commit('add')">加1</button>
    <button @click="$store.dispatch('add')">async 加1</button>
  </div>
</template>

import Vue from 'vue'
import Vuex from 'vuex'

// 挂载this.$state
Vue.use(Vuex)

export default new Vuex.Store({
  // 通过this.$store.state.xxx 访问
  state: {
    counter: 0
  },
  mutations: {
    // 这里的state从哪里来的
    add(state) {
      return state.counter++;
    }
  },
  actions: {
    // 参数是什么？哪里来的
    add({commit}) {
      setTimeout(() => {
        commit("add");
      }, 1000);
    }
  },
  modules: {
  }
})

其中的代码思路就是：

  • 实现一个store类
  • 并且把给类实例挂载到this.$store上

如果是模仿vue-router，那么下面就是Store的一个基本写法：

在这里插入图片描述

但是我们可以看到在store/index.js引入的时候

import Vue from 'vue'
import Vuex from 'vuex'

// 挂载this.$state
Vue.use(Vuex)

export default new Vuex.Store({})

是通过了一个叫做Vuex的

所以要改成
在这里插入图片描述

这样的话，当通过Vue.use(Vuex)的时候，是可以通过Vuex.install来执行install方法的，也可以通过new Vuex.Store来new一个对应的对象

第一件事就是：挂载$store
在这里插入图片描述

然后在class Store里面把，拿到的options里面的state数据转化成是响应式数据

我们在vue-router中使用的而是 Vue.util.defineReactive()这个方法的

但是在state中是可能有多个数据，并且还可能有对象的嵌套的

今天我们就用new Vue的方法，就是把数据放在里面，曲线救国，去变成响应式

new Vue的话，vue会把里面的data递归的都变成是响应式的数据的

在这里插入图片描述

然后外面是通过 this.$store.state.xxx来进行访问的

并且还要把这个生成的响应式数据暴露到外面
在这里插入图片描述

代码如下：

import Vue from 'vue'
import Vuex from './vuex'

// 挂载this.$state
Vue.use(Vuex)

export default new Vuex.Store({
  // 通过this.$store.state.xxx 访问
  state: {
    counter: 0
  },
  mutations: {
    // 这里的state从哪里来的
    add(state) {
      return state.counter++;
    }
  },
  actions: {
    // 参数是什么？哪里来的
    add({commit}) {
      setTimeout(() => {
        commit("add");
      }, 1000);
    }
  },
  modules: {
  }
})

下面就开始实现commit方法

class Store {
    constructor(options) {
        // state响应式处理
        // 后面就可以通过this.$store.state.xxx来进行访问了
        this.state = new Vue({
            data: options.state
        });
        this._mutations = options.mutations;
    }
    commit(type, payload) {
        const entry = this._mutations[type];
        if (!entry) {
            console.error("unknown mutation type");
        }
        entry(this.state, payload);
    }
}

这里就回答了刚刚的一个问题，就是mutation函数里面的state是怎么拿到的

其中的payload，是用户传递的参数

优化：？？？？？？？？？？？？？

在对state进行响应式的时候，源码中，其实为了防止用户直接对vue实例进行操作，就是不想把new Vue直接暴露到外面，它是这样做的

所以就实现了一个get方法，而不能set，这样就是对外界进行了一些隐藏，如果用户set的话会报错

所以只能通过mutation，而不能直接this.state进行改变了

// 1、插件：挂载$store
// 2、实现Store
let Vue;

class Store {
    constructor(options) {
        // state响应式处理
        // 后面就可以通过this.$store.state.xxx来进行访问了
        this._vm = new Vue({
            data: {
                $$state: options.state
            }
        });
        this._mutations = options.mutations;
    }

    get state() {
        return this._vm._data.$$state;
    }

    set state(v) {
        console.error("Please use replaceState to reset state");
    }

    commit(type, payload) {
        const entry = this._mutations[type];
        if (!entry) {
            console.error("unknown mutation type");
        }
        entry(this.state, payload);
    }
}

const install = (_Vue) => {
    Vue = _Vue;

    Vue.mixin({
        beforeCreate() {
            if (this.$options.store) {
                Vue.prototype.$store = this.$options.store
            }
        }
    })
};
export default { Store, install };

通过this.state会触发get方法，设置的话就会触发set方法了

实现dispatch方法

拓展：

在这里插入图片描述

在action的参数中，我们可以通过结构来获取到getter、commit、state这些

所以就认为，传给action方法的就是Store实例this本身了

dispatch(type, payload) {
        const entry = this._actions[type];

        if (!entry) {
            console.error("unkown mutation type");
        }
        entry(this, payload);
    }

然后就测试

报错了
在这里插入图片描述

因为我们传入了this，这个this就会有执行的问题

我们在action中是

actions: {
    // 参数是什么？哪里来的
    add({commit}) {
      setTimeout(() => {
        commit("add");
      }, 1000);
    }
  },

在seTimeout里面的执行了方法，这时候this其实就已经变了，早就不是我们的Store实例本身了，所以一般这个时候都会使用 bind来进程绑定this的了

在这里插入图片描述

然后就实现了

目前代码：

vuex.js

// 1、插件：挂载$store
// 2、实现Store
let Vue;

class Store {
    constructor(options) {
        // state响应式处理
        // 后面就可以通过this.$store.state.xxx来进行访问了
        this._vm = new Vue({
            data: {
                $$state: options.state
            }
        });
        this._mutations = options.mutations;
        this._actions = options.actions;

        // bind绑定this
        this.commit = this.commit.bind(this);
        this.dispatch = this.dispatch.bind(this);
    }

    get state() {
        return this._vm._data.$$state;
    }

    set state(v) {
        console.error("Please use replaceState to reset state");
    }

    commit(type, payload) {
        const entry = this._mutations[type];
        if (!entry) {
            console.error("unknown mutation type");
        }
        entry(this.state, payload);
    }

    dispatch(type, payload) {
        const entry = this._actions[type];

        if (!entry) {
            console.error("unkown mutation type");
        }
        entry(this, payload);
    }
}

const install = (_Vue) => {
    Vue = _Vue;

    Vue.mixin({
        beforeCreate() {
            if (this.$options.store) {
                Vue.prototype.$store = this.$options.store
            }
        }
    })
};
export default { Store, install };

实现getters

我们在store/index.js中

import Vue from 'vue'
import Vuex from './vuex'

// 挂载this.$state
Vue.use(Vuex)

export default new Vuex.Store({
  // 通过this.$store.state.xxx 访问
  state: {
    counter: 0
  },
  mutations: {
    // 这里的state从哪里来的
    add(state) {
      return state.counter++;
    }
  },
  actions: {
    // 参数是什么？哪里来的
    add({commit}) {
      setTimeout(() => {
        commit("add");
      }, 1000);
    }
  },
  modules: {
  },
  getters: {
    doubleCounter(state) {
      return state.counter * 2;
    }
  }
})

定义了一个getters

vuex.js中具体实现

实现流程：

因为我们使用是这样的：

    <h1>两倍：{{$store.getters.doubleCounter}}</h1>

也就是访问了store对象里面getters熟悉的一个key = doubleCounter的属性值

所以

  1. 在Store类中定义一个getters对象
  2. 然后对用户定义的getters进行遍历，然后动态的生成对应函数名的key值和value值
  3. 然后用户访问这个key值的时候，其实就是去执行了key这个名字的 getters中对应的函数了

完整代码如下：

// 1、插件：挂载$store
// 2、实现Store
let Vue;

class Store {
    constructor(options) {
        // state响应式处理
        // 后面就可以通过this.$store.state.xxx来进行访问了
        this._vm = new Vue({
            data: {
                $$state: options.state
            }
        });
        this._mutations = options.mutations;
        this._actions = options.actions;

        // bind绑定this
        this.commit = this.commit.bind(this);
        this.dispatch = this.dispatch.bind(this);
    
        this.getters = {};

        options.getters && this.handleGetters(options.getters);
    }
    handleGetters(getters) {
        Object.keys(getters).map(key => {
            Object.defineProperty(this.getters, key, {
                get: () => getters[key](this.state)
            })
        })
    }
    get state() {
        return this._vm._data.$$state;
    }

    set state(v) {
        console.error("Please use replaceState to reset state");
    }

    commit(type, payload) {
        const entry = this._mutations[type];
        if (!entry) {
            console.error("unknown mutation type");
        }
        entry(this.state, payload);
    }

    dispatch(type, payload) {
        const entry = this._actions[type];

        if (!entry) {
            console.error("unkown mutation type");
        }
        entry(this, payload);
    }
}

const install = (_Vue) => {
    Vue = _Vue;

    Vue.mixin({
        beforeCreate() {
            if (this.$options.store) {
                Vue.prototype.$store = this.$options.store
            }
        }
    })
};
export default { Store, install };
gogogocj
关注
专栏目录
vuex实现及简略解析(小结)
明月如霜丶
03-26 1945
大家都知道vuex是vue的一个状态管理器，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。先看看vuex下面的工作流程图 通过官方文档提供的流程图我们知道，vuex的工作流程， 1、数据从state中渲染到页面； 2、在页面通过dispatch来触发action； 3、action通过调用commit,来触发mutation； 4、mutation来...
实现一个vuex-loading插件
w候人兮猗
11-08 1189
前言 在项目中，如何管理loading是一个很头疼的方式，有的是在请求封装里去做了一个全屏loading，有的是在单页面中管理一个loading，比如如下： data(){ return{ loading:false } }, methods:{ async change(){ this.loading = true // 执...
vuex实现及简略解析
weixin_34037173的博客
02-28 95
大家都知道vuex是vue的一个状态管理器，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。先看看vuex下面的工作流程图 通过官方文档提供的流程图我们知道，vuex的工作流程， 1、数据从state中渲染到页面； 2、在页面通过dispatch来触发action； 3、action通过调用c...
详解如何实现一个简单的 vuex
weixin_33722405的博客
12-12 255
首先我们需要知道为何要使用 vuex。父子组件通信用 prop 和自定义事件可以搞定，简单的非父子组件通信用 bus（一个空的 Vue 实例）。那么使用 vuex 就是为了解决复杂的非父子组件通信。 仅仅会使用 vuex 没什么，看过文档敲敲代码大家都会。难道你就不想知道 vuex 是如何实现的？！ 抛开 vuex 的源码，我们先来想想如...
vuex原理解析并实现一个简单的vuex
weixin_46015333的博客
05-12 333
本篇博客详细解析了 vuex 工作原理，着重介绍了 vuex 中的重点内容，并且一步一步实现了一个简单的 vuex，尤其是 Store 类的代码有非常详细的注释，非常适合初学者。
实现自己的vuex
weixin_45917382的博客
07-17 149
一个状态管理模式 在一个项目中 当一个板块或者是多个板块数据同步更新的时候 可以用vuex
vuex实现简易计数器
09-01
在这个例子中，我们将详细探讨如何使用Vuex实现一个简单的计数器功能。 首先，让我们看看`src/components/Hello.vue`文件。在这个组件中，我们展示了当前计数器的值。`counterValue`是通过`getters`从Vuex store中...
如何实现一个简易版的vuex持久化工具
10-16
在实现Vuex持久化时，我们需要考虑以下几点： 1. 持久化存储方式的选择 在本例中，持久化工具将状态存储到本地存储中。选择localStorage或sessionStorage取决于应用的特定需求，比如是否需要在页面刷新后保留数据。...
实现一个简单的vuex
weixin_45142754的博客
09-04 288
学习vuex源码，并自己实现了一个较为简单的vuex
vuex 基础实现
MRNAN的博客
07-11 377
文章目录vuex使用实现实现getters实现mutations实现 actions扩展export vuex使用 首先知道vuex的基本用法，才能具体实现原理。 1.创建项目 基于vue-cli 创建一个项目： vue create vuex-project 打开项目，打开store/index.js: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state
VUEX简单实现
weixin_44999830的博客
04-01 293
1、先看一个vue响应式的例子，vue中的data 、methods、computed，可以实现响应式。 视图通过点击事件，触发methods中的increment方法，可以更改state中count的值，一旦count值发生变化，computed中的函数能够把getCount更新到视图。 <div id="app"> <button @click="increment"...
实现简单版Vuex
天暮雨的博客
08-03 189
实现简单版Vuex 实现简单版Vuex 介绍 本文目的是实现一个简易版本的Vuex用以学习，也是对从网课学习的总结和复习。其中内容为简易实现，多有不足之处，请多多交流。 内容拆分 实现Store类 分开保存构造函数参数 维持一个响应式的state 实现commit方法和dispatch方法 实现getters 实现install方法 挂载$store 插件测试 先修改插件的引入信息以供实现过程中输出信息查看，也便于发现错误问题。 复制store文件夹命名为kstore并
从0到1实现一个简易版Vuex
Colin
02-05 459
前言 使用vue作为主力开发技术栈的小伙伴，vuex大家在工作中必不可少，面试的时候面试官也多多少少会问一些关于vuex内部机制的问题，小伙伴们只能是去阅读vuex的源码，但不可否认，有些小伙伴们阅读起来源码多少有些吃力，so本文即将带着大家来实现一个简化版的vuex vuex的工作流程如下图所示 组件内通过dispatch调用actions actions通过commit提交mutation...
vue 简单实现vuex原理
舜岳的博客
10-11 309
效果图如下： 1. 准备好环境 使用 vue/cil 初始化项目配置： npm install -g @vue/cli //全局安装@vue/cli vue create demo-vue //创建项目 yarn add vuex安装vuex创建一个store文件夹并使用： 2. 实现目的 stroe/index.js内容如下：（我们的目的将引入自写的vuex实现vuex基础功能） import Vue from 'vue' import Vuex from 'vuex' /
Vuex使用详解、简单实现一个Vuex
qq_45859670的博客
03-09 932
应用层级的状态应该集中到单个 store 对象中。 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。 异步逻辑都应该封装到 action 里面。
用js模拟一个简单的vuex
chuganzong6397的博客
08-31 253
vuex是一个vue的一个数据集中管理方案,现在我们来写一个简单的vuex 首先vuex接受的是一个对象，其中该对象包含了: state,初始数据 getters,数据获取对象 actions,用来改变数据的行为对象 mutations,用来响应actions的行为来进行更改数据的对...
简单实现Vue
weixin_40643543的博客
06-08 344
Vue 内部使用了Object.defineProperty()来实现数据响应式，通过这个函数可以监听到set和get的事件。 var data = { name: 'yck' } observe(data) let name = data.name // -> get value data.name = 'yyy' // -> change value f...
qiankun框架如何共用一个vuex
最新发布
06-07
qiankun框架可以通过将子应用的vuex实例作为主应用vuex实例的一个模块来实现共用。具体步骤如下： 1. 在主应用的vuex实例中，使用`registerModule`方法注册子应用的vuex实例为一个模块，可以指定模块名称和命名空间...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值