Vuex 4源码学习笔记 - Vuex是怎么与Vue结合？（三）

在上一篇笔记中：Vuex源码学习笔记 - Vuex开发运行流程（二）

我们通过运行npm run dev命令来启动webpack，来开发Vuex，并在Vuex的createStore函数中添加了第一个断点。

那么在看源码之前，建议先要熟悉Vuex的使用，如果还不熟练使用，那么在看的时候很容易会发蒙。

我们来复习下Vuex中的几个重要概念和使用

State - 存储状态
Getter - 类似计算属性
Mutation - 更改状态的唯一方法是提交 mutation。
Action - 可以包含任意异步操作，并且提交 mutation来更改状态。
Module - 用来分割模块，每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

下面是计数器应用的Vuex代码

import { createStore } from 'vuex'const state = {count: 0
}const mutations = {increment (state) {state.count++},decrement (state) {state.count--}
}const actions = {increment: ({ commit }) => commit('increment'),decrement: ({ commit }) => commit('decrement'),incrementIfOdd ({ commit, state }) {if ((state.count + 1) % 2 === 0) {commit('increment')}},incrementAsync ({ commit }) {return new Promise((resolve, reject) => {setTimeout(() => {commit('increment')resolve()}, 1000)})}
}const getters = {evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}export default createStore({state,getters,actions,mutations
})

在上面的代码中，分别创建了state、mutations、actions、getters，没有module，默认为根。

那么我们在回忆，为什么要使用Vuex呢？它解决了什么问题？

在使用Vue来开发页面或者组件时，我们在每个data函数内定义当前组件所需的状态，那么随着应用月来越大、越来越复杂，经常会遇到多个页面或组件需要共用某个状态，在一开始我们可以用组件间的通信去解决数据的同步问题。但当应用越来越大，组件越来越多，这种方式的弊病也显露出来，过于耦合，并且难以维护，当有新组件需要共享状态时，还有额外的添加代码。

那么基于这个问题思考，我们为什么不可以将Vue中data函数内的状态放在一个地方，然后多个组件都去这同一个地方去操作状态呢。

这就是Vuex。

下面这张图表示了Vuex的工作流程：

首先在左边的绿色的组件中我们可以使用Vuex中State存储的状态；

然后在组件中可以通过Dispatch触发Actions，在Actions中我们可以调用后端的服务，或者其他的异步或同步操作；

然后在Actions中会触发Mutations来修改State中的状态，

由于State是响应式的，State状态被修改，组件的视图也会随之更新；

因为只能使用Mutations来修改状态，所以State状态是可被预测的，我们可以通过Devtools来监测到状态的改变。

Vuex的使用

首先在store.js中通过createStore函数来创建vuex的实例对象

import { createStore } from 'vuex'export default createStore({state: { /**...**/ },getters: { /**...**/ },actions: { /**...**/ },mutations: { /**...**/ }
})

然后在app.js，通过app.use函数来将vuex的实例注入到vue中

import { createApp } from 'vue'
import Counter from './Counter.vue'
import store from './store'const app = createApp(Counter)app.use(store)app.mount('#app')

接着就可以在页面中去使用store了

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'export default {setup () {const store = useStore()return {count: computed(() => store.state.count),evenOrOdd: computed(() => store.getters.evenOrOdd),increment: () => store.dispatch('increment'),decrement: () => store.dispatch('decrement'),incrementIfOdd: () => store.dispatch('incrementIfOdd'),incrementAsync: () => store.dispatch('incrementAsync')}}
}
</script>

我们前面的文章讲过：如何编写Vue插件。

使用app.use函数时，如果参数为一个对象那么Vue会自动调用函数内的install方法。

也就是src/store.js中的

import { storeKey } from './injectKey'
import { addDevtools } from './plugins/devtool'export class Store {constructor (options = {}) {//...}install (app, injectKey) {// 第一，将Store对象注入到vue的实例上app.provide(injectKey || storeKey, this)app.config.globalProperties.$store = this// 第二，判断是否添加Vue devtool插件const useDevtools = this._devtools !== undefined? this._devtools: __DEV__ || __VUE_PROD_DEVTOOLS__if (useDevtools) {addDevtools(app, this)}}//...
}

可以看到install函数做的事情很简单：

第一，将Store对象注入到vue的实例上
第二，判断是否添加Vue devtool插件

可以看到有两行代码挂载Store对象，通过provide的方式，主要是使用在setup方式中，通过useStore()来获取store

<script>
import { useStore } from 'vuex'export default {setup () {const store = useStore()}
}
</script>

useStore函数的源代码在injectKey.js文件中：

import { inject } from 'vue'export const storeKey = 'store'export function useStore (key = null) {return inject(key !== null ? key : storeKey)
}

provide/inject的使用就不多讲了，更多请查看文档。

第二种通过app.config.globalProperties.$store = this的方式挂载到全局vue实例中，主要是使用在下面的场景，通过this.$store来获取store的实例。

methods: {increment() {this.$store.commit('increment')console.log(this.$store.state.count)}
}

总结

今天我们复习了Vuex的使用，以及为什么要使用Vuex，同时看到了Vuex是如何与Vue去结合到一起的。

Vuex通过Vue插件的方式，通过use函数讲Vuex实例对象绑定到Vue中。

可以通过useStore函数或者this.$store两种方式在页面中访问store。

明天我们来分析Store类的构造函数都做了哪些事情。

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新

Vuex 4源码学习笔记 - Vuex是怎么与Vue结合？（三）相关推荐

Vuex 4源码学习笔记 - 通过Vuex源码学习E2E测试（十一）
在上一篇笔记中:Vuex 4源码学习笔记 - 做好changelog更新日志很重要(十) 我们学到了通过conventional-changelog来生成项目的Changelog更新日志,通过更新日志 ...
Vuex 4源码学习笔记 - 通过dispatch一步步来掌握Vuex整个数据流（五）
在上一篇笔记中:Vuex 4源码学习笔记 - Store 构造函数都干了什么(四) 我们通过查看Store 构造函数的源代码可以看到主要做了三件事情: 初始化一些内部变量以外执行installMod ...
Vuex 4源码学习笔记 - 做好changelog更新日志很重要（十）
在上一篇笔记中:Vuex是如何发布的(九) 我们看到了Vuex是通过npm run release命令来运行release.js这个发布脚本来进行发布,在其中有一个步骤是通过yarn changelo ...
Java多线程之JUC包：Semaphore源码学习笔记
若有不正之处请多多谅解,并欢迎批评指正. 请尊重作者劳动成果,转载请标明原文链接: http://www.cnblogs.com/go2sea/p/5625536.html Semaphore是JUC ...
RocketMQ 源码学习笔记 Producer 是怎么将消息发送至 Broker 的？
RocketMQ 源码学习笔记 Producer 是怎么将消息发送至 Broker 的? 文章目录 RocketMQ 源码学习笔记 Producer 是怎么将消息发送至 Broker 的? 前言项目 ...
jquery源码学习笔记三：jQuery工厂剖析
jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...
雷神FFMpeg源码学习笔记
雷神FFMpeg源码学习笔记文章目录雷神FFMpeg源码学习笔记读取编码并依据编码初始化内容结构每一帧的视频解码处理读取编码并依据编码初始化内容结构在开始编解码视频的时候首先第一步需要注册 ...
Apache log4j-1.2.17源码学习笔记
(1)Apache log4j-1.2.17源码学习笔记 http://blog.csdn.net/zilong_zilong/article/details/78715500 (2)Apache l ...
PHP Yac cache 源码学习笔记
YAC 源码学习笔记本文地址 http://blog.csdn.net/fanhengguang_php/article/details/54863955 config.m4 检测系统共享内存支持情 ...

Vuex 4源码学习笔记 - Vuex是怎么与Vue结合？（三）

Vuex的使用

总结

Vuex 4源码学习笔记 - Vuex是怎么与Vue结合？（三）相关推荐

最新文章

热门文章