让我们实现一个简单的Vuex吧！- 起步

「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」

模拟Vuex

我们用了这么久的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，让我们来编写那些已经准备好的的想法吧！

下节开写！欸嘿，就是皮

喜欢的点个赞吧！求求了 （=。=） 下节我会更努力的！！！