「这是我参与2022首次更文挑战的第27天,活动详情查看:2022首次更文挑战」
模拟Vuex
我们用了这么久的Vuex
感觉是不是很好用,但是学会了他的用法,我们也要学学怎么模拟一个简单版本的Vuex
毕竟授人以鱼不如授人以渔。
在进行模拟之前,先让我们回忆一下Vuex
的基础概念
忘记的同学可以点一下,看一下哈(求赞的眼神)
好了,回顾完毕之后,我们正式进入 Vuex 模拟的阶段
基本结构
Vue.js 的插件要求
首先我们先看看
import Vue from 'vue'
import Vuex from '../myvuex'
Vue.use(Vuex)
复制代码
这里的Vue.use(Vuex)
是我们需要重点注意到的,之前我们在路由注册 篇章中也有提到
- 传送门:简单版本的VueRouter手写-插件的注册(有你不知道的小知识哦!) 小声逼逼,看官能不能点个赞呢?
Vue.js 的插件应该暴露一个
install
方法。这个方法的第一个参数是Vue
构造器,第二个参数是一个可选的选项对象
Vuex.Store 什么
接着有如下这么一句话,那么由此我们可以得出Store
其实是一个类,那么就很明朗了
export default new Vuex.Store({
...
})
复制代码
我们需要实现一个install
方法、一个类(Store
)包含以下的字段属性:
- state
- getters
- mutations
- actions
Vuex 如何挂载呢?
Vuex 如何挂载,这是一个问题,但是不要慌,且听我徐徐道来
案例
<template>
<div id="app">
<h1>Vuex - Demo</h1>
count:{{ $store.state.count }} <br>
msg: {{ $store.state.msg }}
<h2>Getter</h2>
reverseMsg: {{ $store.getters.reverseMsg }}
<h2>Mutation</h2>
<button @click="$store.commit('increate', 2)">Mutation</button>
<h2>Action</h2>
<button @click="$store.dispatch('increateAsync', 5)">Action</button>
</div>
</template>
复制代码
解析
首先我们查看如下的案例,大家会发现,不管我们是调用
- state
- getters
- mutations
- actions
都是通过$store
.xxx 属性来进行调用,那么我们就需要在注册Vuex
插件的时候,将Store
类注入到Vue
实例的 $store
属性上,这样就能实现所有的组件都可以通过this.$store
来进行访问我们的Vuex
参数,从而可以在所有的组件中共享状态。
咕咕咕 环节
好了万事俱备,只欠东风。
准备好开启VSCODE
,让我们来编写那些已经准备好的的想法吧!
下节开写!欸嘿,就是皮
喜欢的点个赞吧!求求了 (=。=) 下节我会更努力的!!!