Vue.js 框架源码与进阶 - Vuex 状态管理

每天内卷一点点

已于 2022-08-01 10:21:09 修改

阅读量270

点赞数 1

分类专栏： Vue.js 框架源码与进阶文章标签： vue.js 前端 javascript

于 2022-07-08 15:31:19 首次发布

本文链接：https://blog.csdn.net/weixin_41071974/article/details/125662336

版权

Vue.js 框架源码与进阶专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、组件通信方式

1.1 组件内的状态管理流程

Vue 最核心的两个功能：数据驱动和组件化

组件化开发给我们带来了：更快的开发效率、更好的可维护性
每个组件都有自己的状态（state）、视图（view）和行为（actions）等组成部分

下面是一个最简单的组件的代码，每个组件内部都有自己的数据、模板还有方法

这里我们描述的是单个组件的状态管理，实际开发过程中可能多个组件都要共享状态，我们所说的状态管理就是通过状态集中管理和分发解决多个组件共享状态的问题

数据可以称之为状态，每个组件内部都可以管理自己的内部状态
模板可以称之为视图，每个组件都有自己的视图，把状态绑定到视图上给用户
用户与视图交互的时候可能会更改状态，当状态发生变化后会自动更新到视图，更改状态的部分可以称之为行为

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

状态管理包含以下几部分：

state：驱动应用的数据源
view：以声明方式将 state 映射到视图
actions：响应在 view 上的用户输入导致的状态变化

这里的箭头是数据的流向，此处数据的流向是单向的，State 状态就是我们所说的数据，数据绑定到视图展示给用户，当用户和视图交互，通过 Actions 更改数据之后，把更改后的数据重新绑定到视图

在这里插入图片描述

1.2 组件间通信方式

大多数场景下的组件并不是孤立存在的，而是相互协作共同构成了一个复杂的业务功能
在 Vue 中为不同的组件关系提供了不同的通信规则

在这里插入图片描述

1.2.1 父组件给子组件传值

父传子：Props Down

 <child title="My journey with Vue"></child>

export default {
  // props: ['title'],
  props: {
    title: String
  }
}

1.2.2 子组件给父组件传值

子传父：Event Up
在子组件中使用 $emit 发布一个自定义事件

<button v-on:click="$emit('enlargeText', 0.1)"> 
  Enlarge text 
</button>

在使用这个组件的时候，使用 v-on 监听这个自定义事件
可以通过 $event 访问到被抛出的这个值（使用事件抛出一个值），但在事件处理函数中是不能这么使用的

<blog-post v-on:enlargeText="hFontSize += $event"></blog-post>

1.2.3 不相关组件传值

非父子组件：Event Bus
我们可以使用 Event Bus 来解决这个问题：创建一个公共的 Vue 实例作为事件总线/事件中心

eventbus.js

import Vue from 'vue'
export default new Vue()

在需要通信的两端

使用 $emit 发布

import bus from './eventbus'
// 没有自定义传参 
bus.$emit('自定义事件名称');

// 有自定义传参 
bus.$emit('自定义事件名称', 数据);

使用 $on 订阅

import bus from './eventbus'
// 没有参数 
bus.$on('自定义事件名称', () => { // 执行操作 })

// 有参数 
bus.$on('自定义事件名称', data => { // 执行操作 })

1.2.4 其它常见方式

官方文档

$root
$parent
$children
$refs

1.2.5 通过 ref 获取子组件

父直接访问子组件：通过 ref 获取子组件
ref 有两个作用
- 如果你把它作用到普通 HTML 标签上，则获取到的是 DOM
- 如果你把它作用到组件标签上，则获取到的是组件实例

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

Child.vue

<template>
  <div>
    <h1>ref Child</h1>
    <input ref="input" type="text" v-model="value">
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: ''
    }
  },
  methods: {
    // 用来从父级组件聚焦输入框
    focus () {
      this.$refs.input.focus()
    }
  }
}
</script>

在使用子组件的时候，添加 ref 属性：Parent.vue

<template>
  <div>
    <h1>ref Parent</h1>
    <child ref="c"></child>
  </div>
</template>

<script>
import child from './04-Child'
export default {
  components: {
    child
  },
  mounted () {
    this.$refs.c.focus()
    this.$refs.c.value = 'hello input'
  }
}
</script>

1.3 简易的状态管理方案

官方文档

如果多个组件之间要共享状态(数据)，使用上面的方式虽然可以实现，但是比较麻烦，而且多个组件之间互相传值很难跟踪数据的变化，如果出现问题很难定位问题
当遇到多个组件需要共享状态的时候，典型的场景：购物车。我们如果使用上述的方案都不合适，我们会遇到以下的问题：
- 问题一：多个视图依赖于同一状态
- 问题二：来自不同视图的行为需要变更同一状态
对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝
以上的这些模式非常脆弱，通常会导致无法维护的代码
因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为
我们可以把多个组件的状态，或者整个程序的状态放到一个集中的位置存储，并且可以检测到数据的更改，你可能已经想到了 Vuex

这里我们先以一种简单的方式来实现

首先创建一个共享的仓库 store 对象

store.js

集中式的状态管理，所有状态都在 store 中进行管理，且它为全局唯一的对象，任意的组件都可以导入 store 模块使用其中的状态，更改状态也是在该模块中实现的

export default {
  debug: true,
  state: {
    user: {
      name: 'xiaomao',
      age: 18,
      sex: '男'
    }
  },
  setUserNameAction (name) {
    if (this.debug) {
      console.log('setUserNameAction triggered：', name)
    }
    this.state.user.name = name
  }
}

把共享的仓库 store 对象，存储到需要共享状态的组件的 data 中

componentA.vue

<template>
  <div>
    <h1>componentA</h1>
    user name: {{ sharedState.user.name }}
    <button @click="change">Change Info</button>
  </div>
</template>

<script>
import store from './store'
export default {
  methods: {
    change () {
      store.setUserNameAction('componentA')
    }
  },
  data () {
    return {
      privateState: {},
      sharedState: store.state
    }
  }
}
</script>
<style>
</style>

componentB.vue

<template>
  <div>
    <h1>componentB</h1>
    user name: {{ sharedState.user.name }}
    <button @click="change">Change Info</button>
  </div>
</template>

<script>
import store from './store'
export default {
  methods: {
    change () {
      store.setUserNameAction('componentB')
    }
  },
  data () {
    return {
      privateState: {},
      sharedState: store.state
    }
  }
}
</script>
<style>
</style>

接着我们继续延伸约定，组件不允许直接变更属于 store 对象的 state，而应执行 action 来分发(dispatch) 事件通知 store 去改变，这样最终的样子跟 Vuex 的结构就类似了。这样约定的好处是，我们能够记录所有 store 中发生的 state 变更，同时实现能做到记录变更、保存状态快照、历史回滚/时光旅行的先进的调试工具

在这里插入图片描述

二、Vuex 回顾

2.1 什么是 Vuex

官方文档

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能

Vuex 是专门为 Vue.js 设计的状态管理库
它采用集中式的方式存储需要共享的数据
从使用角度，它就是一个 JavaScript 库
它的作用是进行状态管理，解决复杂组件通信，数据共享
Vuex 集成到了 devtools 中，提供了 time-travel 时光旅行历史回滚功能

2.2 什么情况下使用 Vuex

非必要的情况不要使用 Vuex
- Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡
大型的单页应用程序
- 多个视图依赖同一状态
- 来自不同视图的行为需要变更同一状态

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：Flux 架构就像眼镜：您自会知道什么时候需要它

建议符合这种场景的业务使用 Vuex 来进行数据管理，例如非常典型的场景：购物车案例
注意：Vuex 不要滥用，不符合以上需求的业务不要使用，反而会让你的应用变得更麻烦

2.3 Vuex 核心概念

这张图展示了 Vuex 的核心概念，并且演示了整个工作流程
在这里插入图片描述

从 State 开始，State 是我们管理的全局状态
把状态绑定到 Vue Components 组件（也就是视图上）渲染到用户界面展示给用户
用户可以和视图交互（比如点击购买按钮支付的时候），此时 Dispatch 分发 Actions（此处不直接提交 Mutations 是因为 Actions 中可以做异步的操作，购买的时候要发送异步请求）
当异步请求结束再通过提交 Mutations 记录状态的更改（Mutations 必须是同步的，所有状态的更改都要通过 Mutations，这样做的目的是为了追踪到所有状态的变化，阅读代码的时候更容易分析应用内部状态改变，还可以记录其改变实现高级的调试功能，比如 time-travel，历史回滚功能）

Vuex 核心概念

Store（仓库）：使用 Vuex 应用程序的核心，每一个应用仅有一个 Store。Store 是一个容器，包含应用中的大部分状态，不能直接改变 Store 中的状态，要通过提交 Mutation 的方式改变状态
State：状态保存至 Store 中，因为 Store 是唯一的，因此状态也是唯一的，称为单一状态树。但是如果所有的状态都保存在 State 中，程序则难以维护，可以通过后续的模块来解决该问题。注意，这里的状态时响应式的
Getter：像是 Vuex 中的计算属性，方便从一个属性派生出其他的值。它内部可以对计算的结果进行缓存，只有当依赖的状态发生改变时才会重新计算
Mutation：状态的变化必须通过提交 Mutation 来完成
Action：和 Mutation 类似，不同的是 Action 可以进行异步操作，内部改变状态的时候都需要提交 Mutation
Module（模块）：由于使用单一状态树，应用的所有状态会集中到一个比较大的对象上来，当应用变得非常复杂时，Store 对象就有可能变得非常臃肿。为了解决这个问题，Vuex 允许我们将 Store 分割成模块每个模块拥有自己的 State、Mutation、Action、Getter 甚至是嵌套的子模块

三、Vuex 基本使用

3.1 基本代码结构

使用 Vue-cli 创建项目的时候，如果选择了 Vuex，会自动生成 Vuex 的基本结构
- Vuex 和 VueRouter 都是 Vue 的插件。插件内部把 Vuex 的 Store 注入到 Vue 的实例上，然后创建 Vuex 中的 Store 对象并且导出
- Store 构造函数接收 state、mutations、actions，modules，如果有需要还可以有 getters

store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

创建 Vue 实例的时候传入 store 选项，这个 store 选项会被注入到 Vue 实例中，在组件中使用到的 this.$store 就是在这个位置注入的

main.js

import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.2 State

Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态

state: {
  count: 0,
  msg: 'Hello Vuex'
}

count：{{ $store.state.count }} <br>
msg: {{ $store.state.msg }}

使用 mapState 简化 State 在视图中的使用，mapState 返回计算属性
mapState 有两种使用的方式：
方式一：接收数组参数

count：{{ count }} <br>
msg: {{ msg }}

// 该方法是 vuex 提供的，所以使用前要先导入
import { mapState } from 'vuex'

// mapState 返回名称为 count 和 msg 的计算属性
// 在模板中直接使用 count 和 msg
computed: {
  // count: state => state.count
  ...mapState(['count', 'msg'])
}

方式二：接收对象参数
- 如果当前视图中已经有了 count 和 msg，如果使用上述方式的话会有命名冲突，解决的方式

count：{{ num }} <br>
msg: {{ message }}

// 该方法是 vuex 提供的，所以使用前要先导入
import { mapState } from 'vuex'

// 通过传入对象，可以重命名返回的计算属性
// 在模板中直接使用 num 和 message
// ...mapState({ num: 'count', message: 'msg' })
computed: {
  ...mapState({
    num: state => state.count,
    message: state => state.msg
  })
}

3.3 Getter

getters: {
  reverseMsg (state) {
    return state.msg.split('').reverse().join('')
  }
}

Getter 就是 store 中的计算属性，使用 mapGetters 简化视图中的使用

reverseMsg: {{ $store.getters.reverseMsg }}

reverseMsg: {{ reverse }}

// --------------

import { mapGetters } from 'vuex'
computed: {
  // ...mapGetters(['reverseMsg']),
  // 改名，在模板中使用 reverse
  ...mapGetters({
    reverse: 'reverseMsg'
  })
}

3.4 Mutation

使用 Mutation 改变状态的好处是，集中的一个位置对状态修改，不管在什么地方修改，都可以追踪到状态的修改。可以实现高级的 time-travel 调试功能

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)
这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

mutations: {
  increate (state, payload) {
    state.count += payload
  }
}

<button @click="$store.commit('increate', 2)">Mutation</button>

<button @click="increateMut(3)">Mutation</button>

// -----------
import { mapMutations } from 'vuex'

methods: {
  // ...mapMutations(['increate']),
  // 传对象解决重名的问题
  ...mapMutations({
    increateMut: 'increate'
  })
}

3.5 Action

Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态
- Action 可以包含任意异步操作

actions: {
  increateAsync (context, payload) {
    setTimeout(() => {
      context.commit('increateAsync', payload)
    }, 2000)
  }
}

<button @click="$store.dispatch('increateAsync', 5)">Action</button>

<button @click="increateAction(6)">Action</button>

// ------------
import { mapActions } from 'vuex'

methods: {
  // ...mapActions(['increateAsync']),
  ...mapActions({
  	increateAction: 'increateAsync'
  })
}

3.6 Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

store/moudules/cart.js

const state = {}
const getters = {}
const mutations = {}
const actions = {}

export default {
  namespaced: true, // 开启命名空间
  state,
  getters,
  mutations,
  actions
}

store/moudules/products.js

const state = {
  products: [
    { id: 1, title: 'iPhone 11', price: 8000 },
    { id: 2, title: 'iPhone 12', price: 10000 }
  ]
}
const getters = {}
const mutations = {
  setProducts (state, payload) {
    state.products = payload
  }
}
const actions = {}

export default {
  namespaced: true, // 开启命名空间
  state,
  getters,
  mutations,
  actions
}

store/index.js

modules: {
  products,
  cart
}

products: {{ $store.state.products.products }} <br>
// 如果重名会将重名的方法全部调用
<button @click="$store.commit('setProducts', [])">Mutation</button> -->

products: {{ products }} <br>
<button @click="setProducts([])">Mutation</button>

// --------------
computed: {
// 参数：命名空间名字、映射的属性
  ...mapState('products', ['products'])
},
methods: {
  ...mapMutations('products', ['setProducts'])
}

3.7 Vuex 严格模式

所有的状态变更必须通过提交 Mutation，但是这仅仅是一个约定
如果你想的话，你可以在组件中随时获取到 $store.state.msg 对它进行修改，从语法层面这是没有问题的，但是这破坏了 Vuex 的约定。如果在组件中直接修改 state，devtools 无法跟踪到这次状态的修改
开启严格模式后，如果你在组件中直接修改 state 状态，会抛出错误

开启严格模式（store/index.js）

export default new Vuex.Store({
  strict: true
  ...
})

不要在生产环境下开启严格模式
严格模式会深度检查状态树，来检查不合规的状态改变，会影响性能
我们可以在开发环境中启用严格模式，在生产中关闭

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production'
  ...
})

四、模拟 Vuex

4.1 基本结构

模拟实现一个 Vuex 实现同样的功能

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    msg: 'Hello World'
  },
  getters: {
    reverseMsg (state) {
      return state.msg.split('').reverse().join('')
    }
  },
  mutations: {
    increate (state, payload) {
      state.count += payload
    }
  },
  actions: {
    increateAsync (context, payload) {
      setTimeout(() => {
        context.commit('increate', payload)
      }, 2000)
    }
  }
})

<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>

4.2 实现思路

实现 install 方法
- Vuex 是 Vue 的一个插件，所以和模拟 VueRouter 类似，先实现 Vue 插件约定的 install 方法
实现 Store 类
- 实现构造函数，接收 options
- state 的响应化处理
- getter 的实现
- commit、dispatch 方法

4.3 install

// 存储 install 中获取到的vue构造函数
let _Vue = null
class Store {}
function install (Vue) {
  _Vue = Vue
  // 获取 vue 实例 从而拿到选项中的 store
  _Vue.mixin({
    // 当创建Vue的根实例，会把store注入到所有vue实例
    beforeCreate () {
      // 如果是组件实例，没有store选项
      if (this.$options.store) {
        _Vue.prototype.$store = this.$options.store
      }
    }
  })
}

4.4 Store 类

class Store {
  constructor (options) {
    const {
      // 防止用户未传入相应选项
      state = {},
      getters = {},
      mutations = {},
      actions = {}
    } = options
    
	// state 是响应式的
    this.state = _Vue.observable(state)
    
    // 此处不直接 this.getters = getters，是因为下面的代码中要方法 getters 中的 key
    // 如果这么写的话，会导致 this.getters 和 getters 指向同一个对象
    // 当访问 getters 的 key 的时候，实际上就是访问 this.getters 的 key 
    // 会触发 key 属性的 getter，会产生死递归
    this.getters = Object.create(null)
    Object.keys(getters).forEach(key => {
      // 把对应的key注册到this.getters对象中
      Object.defineProperty(this.getters, key, {
        get: () => getters[key](state)
      })
    })
    // 使用 _开头 标识私有
    this._mutations = mutations
    this._actions = actions
  }

  // Mutation
  commit (type, payload) {
    this._mutations[type](this.state, payload)
  }

  // Action
  dispatch (type, payload) {
    // 简单模拟，传入this即可
    this._actions[type](this, payload)
  }
}

// 导出模块
export default {
  Store,
  install
}

4.5 使用自己实现的 Vuex

src/store/index.js 中修改导入 Vuex 的路径，测试

import Vuex from '../myvuex'

Vue.use(Vuex)

每天内卷一点点

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js 框架源码与进阶 - Vuex 状态管理

Vue 最核心的两个功能：数据驱动和组件化下面是一个最简单的组件的代码，每个组件内部都有自己的数据、模板还有方法状态管理包含以下几部分：1.2.2 子组件给父组件传值子传父：Event Up在子组件中使用 $emit 发布一个自定义事件在使用这个组件的时候，使用 v-on 监听这个自定义事件可以通过 $event 访问到被抛出的这个值（使用事件抛出一个值），但在事件处理函数中是不能这么使用的1.2.3 不相关组件传值非父子组件：Event Bus我们可以使用 Event B
复制链接

扫一扫