vue实战开发014:状态管理模式Vuex使用详解

2022-12-25 0 841

这三天写了几个通用型的组件,即使我辨认出在现阶段的页面很多相近的地方,为的是更加加速有效的合作开发,我把那些通用型的类别展开组件形式装箱,然后当我在采用的这时候直接初始化那些组件方可,但这儿辨认出个难题,那是即使组件比较大,组件里头还冗余了其他的组件,比如说上面这图,现阶段是两个组件,里头冗余了Exi组件和音频自动更新的组件,要实现那个冗余还是很单纯的,如果在相关联的组件中提及他们需要的组件方可,这儿的难题是统计数据的传达。

vue实战开发014:状态管理模式Vuex使用详解

为的是让组件极具通用型性,我把组件中除了一般来说的文本以外的大部份模块都展开了统计数据传达,也是说我先期如果把文本一换方可成为第二组组件了,但也让让我在传达统计数据的这时候碰到了难题,那是出现了统计数据的递回传达,操作方式起来十分的繁杂,所以我急于用Vuex来解决那个难题。

vue实战开发014:状态管理模式Vuex使用详解

Vuex 是什么?(非官方说明)

Vuex 是两个专为 Vue.js 应用领域软件合作开发的状况区域化。它采用封闭式repeats应用领域的大部份组件的状况,并以适当的规则确保状况以一种可预估的方式发生改变。Vuex 也软件系统到 Vue 的非官方增容辅助工具 devtools extension,提供了譬如零实用性的 time-travel 增容、状况镜像引入求出等高阶增容机能。

修正,并且你的修正可以得到自上而下的积极响应更改。

vue实战开发014:状态管理模式Vuex使用详解

上面他们来加装采用Vuex,先在工程项目中加装 vuex,在工程项目产品目录下采用指示加装:npm install vuex –save,反之亦然为的是更快的管理该工程项目,我在src二百一十三下增建两个名叫store的文件夹并增建两个index.js文件,在这儿引入Vuex框架并实例化初始化Vuex.Store():

vue实战开发014:状态管理模式Vuex使用详解

接下来他们在工程项目中注册Vuex,在main.js中引入store中的index.js文件,然后在Vue中自上而下注入一下,这样一来就可以在任何两个组件里头采用this.$store了,当然你也可以在创建工程项目的这时候就选择Vuex,这样就会自行创建了。

vue实战开发014:状态管理模式Vuex使用详解

接下来他们来尝试下把音频自动更新中的统计数据提到store中来,回到store文件的index.js里头,他们先声明两个state变量,把之前模板中的对象复制到state中,然后再在实例化的Vuex.Store里头传入两个那个state对象,如图所示:

vue实战开发014:状态管理模式Vuex使用详解

也方便了很多。

vue实战开发014:状态管理模式Vuex使用详解

但目前从整个工程项目来说,Vuex貌似不怎么适用,我需要在同两个页面初始化多个相同的组件(含冗余的组件),同时给组件赋值不同的模块值,而Vuex比较擅长的是对组件之间的统计数据交互、传达和修正(或许还要对Vuex在深入研究下了)。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务