
什么是Vuex?
状态管理是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在数据中的属性需要共享给其他某视频剪辑软件组件使用的部分,就叫做状态。简单的说就是数据中需要共用的属性。
使用状态管理进行组件间数据的管理
npm i vuex -S
main.js
从“vue”导入某视频剪辑软件从“应用程序”导入/App.vue "从商店导入"。/store.js'new Vue({ store,el: '#app ',render: h=h(App)})store.js
从vue '导入某视频剪辑软件从Vuex '导入Vuex。使用(Vuex)//这里定义初始值let state={ count :10 };常数突变={ add(context){ context.count },reduce(context){ context。count-};//事件触发后的逻辑操作//参数为事件函数const actions={ add(add){ add。提交(' add ')},减少(reduce){ reduce。commit(' reduce ')},oddd({ commit,state }){ if(state。计数% 2====0){提交(' add ')} } } } };//返回改变后的数值const getter={ count(context){ return context。count },getOdd(context){ return context。计数% 2===0?'偶数' : '奇数' }};导出默认的新Vuex .存储({状态、突变、动作、获取者})App.vue
模板div id='app '按钮@单击='添加'添加/按钮按钮@点击='减少'减少/按钮按钮@ click=' oddd ' oddd/button div { { count } }/div { { getOdd } }/div/template script从' vuex '导出默认值导入{ mapgeters,mapActions }得到计算后的值computed : apgetter([' count ',' getOdd']),//发生点击事件触发不同函数方法:空间(['增加','减少','增加'])}/脚本
https://github.com/wmui捷信:
总结
以上所述是小编给大家介绍的状态管理的简单使用教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!