详解几十行代码实现一个某视频剪辑软件的状态管理

介绍

采用集中式存储管理应用的所有组件的状态，就能实现组件间数据共享

实现

逻辑图

从图上有两条线： Vue.use(vuec)，与新Vuec.center(选项)

第一条线Vue.use(vuec)安装插件

使用Vue.use(vuec)时，会执行vuec的安装方法，会注入参数某视频剪辑软件所以vuec是这样的，

//index.jsimport {Center，install}从“”开始./center '导出默认{居中，安装}中心对象将实例化成中心（下面再说),我们先看看安装方法

//center.jslet Vue //全局变量，保存安装里的Vueexport函数安装(_Vue) { if(！vue){ _ vue。mixin({ create : applyMixin//在创建前钩子上混入应用混合信息函数})} Vue=_ Vue }安装在某视频剪辑软件原型的创建前混入应用混合信息函数，也就是说在生成每个某视频剪辑软件组件时，在它的生命周期创建前钩子上就会执行应用混合信息方法

第二条线新Vuec.center(选项)实例化中心对象

先看看用户传入的选项，下面例子

导出默认的新Vuec .中心({ state: { name: '浏阳' }，作必要修改后为： { changeName(state){ state。name=' jike ' } } })上面代码会生成中心实例，该实例上应该包括：state状态，提交方法提交变更等

//center.jsexport类中心{构造函数(选项={ }){ 0让中心=这个。风险投资=期权。ventures observer state(Center，options.state) } get state () { //代理了这个。中央州的最终访问值归还这个_vm .$数据$$state }提交(_type，_payload) { this。突变[_type](this.state，_ payload)} }函数observeState(中心，状态){ //响应式州中心. VM _ new=Vue({ data : { $ $ state : state } })在执行新Vuec .中心({ 0.})时，就是执行中心的构造函数

首先执行让中心=这个，定义中心保存当前实例

接着执行这。突变=选项。突变，在实例中心上添加突变属性，值就是用户输入突变，

按上面例子，这。突变长成这样

这个。突变={ changeName(state){ state。name=' jike ' } }最后执行observeState(中心，选项。状态)，作用：让中心实例的状态属性指向选项。状态并且是响应式的

函数observeState(中心，状态){ //响应式州中心_vm=new Vue({ //利用某视频剪辑软件的响应系统，将状态转化成响应式data: { $$state: state } })在中心实例上添加_vm属性，值是一个某视频剪辑软件实例，在该某视频剪辑软件实例的数据下定义了$ $州，它的值是选项。状态用户输入的国家；结合上面的这段代码

//center.jsexport类中心{.省略get state () { //代理了这个。中央州的最终访问值归还这个_vm .$数据$$state }.省略}所以我们在组件中访问中央州其实就是访问居中_vm .$数据。$ $州

好的，居中就构建好了

创建某视频剪辑软件组件

用户输入

从“vue”导入某视频剪辑软件从“应用程序”导入/App”从导入路由器"。/路由器"从导入中心"。/center'new Vue({ el: '#app ')，路由器，居中，//构建好的中心实例template: 'App/'，components: { App } })在创建前生命周期时会触发上面混入的应用混合信息函数

//mixins.jsexport默认函数applyMixin(){ vuecInit。呼叫(此)/}函数vuecInit () { const options=this .$options //vue的实例化是从外往内，所以父组件的$中心一定是选择的把这个放在中心$center=options.parent？选项。父母。$ center :选项。中心}应用混合里会执行vuecInit.call(this)，这里的这指向当前组件的实例，

接着看vuecInit，定义了选择等于用户输入选项，因为先创建根组件，所以根组件这个。$中心的值的引用就是我们在新Vue({ 0.中心})时传入的中心实例，下面所有组件都指向它

好的，你就可以在组件里使用这个。$中心访问了

犯罪变更

//center.jsexport类Center {.省略commit (_ type，_ payload) {this。变体[_ type](这。state，_payload) }}通常我们换的时候，这个。$ center.submit ('changename '，' jike ')。在这种情况下，这个。variations [_ type]是相应的方法函数，状态和有效负载被传递到其中。

以上面的例子为例

//这个。变体[_ type]，_ type=' changename '，有效负载=' jike' this。variations={ changename(状态，有效负载){state。name=payload}}描述

以上只是简单的状态管理，还有很多地方没有实现：动作异步变更、getters函数、modules模块划分、辅助函数mapState等等

源代码地址： github

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。